sxq2024
/
chunwan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'页面制作'

Browse Source
main
syt 4 months ago
parent d2d65ff658
commit ce5dce19ce
13 changed files with 650 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 26
      pages.json
  2. 210
      pages/pipei/shipin/index.vue
  3. 210
      pages/pipei/tongcheng/index.vue
  4. 205
      pages/pipei/yuyin/index.vue
  5. BIN
      static/icon-nan.png
  6. BIN
      static/icon-nv.png
  7. BIN
      static/tongcheng-bg.png
  8. BIN
      static/tongcheng-xin.png
  9. BIN
      static/xin2.png
  10. BIN
      static/yuyin-bg.png
  11. BIN
      static/yuyin-bg2.png
  12. BIN
      static/yuyin-cha.png
  13. BIN
      static/yuyin-xin2.png

26
pages.json
Unescape View File

@ -75,7 +75,31 @@
"navigationStyle": "custom"
}
}
],
,{
"path" : "pages/pipei/tongcheng/index",
"style" :
{
"navigationStyle": "custom"
}
}
,{
"path" : "pages/pipei/yuyin/index",
"style" :
{
"navigationStyle": "custom"
}
}
,{
"path" : "pages/pipei/shipin/index",
"style" :
{
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "纯玩app",

210
pages/pipei/shipin/index.vue
Unescape View File

@ -0,0 +1,210 @@
<template>
<view class="tongcheng">
<view class="tongcheng-navbar">
<u-navbar title="同城速配" back-icon-color="#ffffff" title-color="#ffffff" :background="background"></u-navbar>
</view>
<view class="tongcheng-content">
<view class="title">开始心电感应吧</view>
<view class="desc">马上配发一个小可爱</view>
<view class="dian">
<view class="info" v-if="isSucess == false">
<image src="@/static/nv.png"></image>
<view class="txt">空白</view>
</view>
<view class="user" v-else>
<view class="item">
<image class="avatar" src="@/static/nv.png"></image>
<view class="txt">空白空白1</view>
<view class="sex nv">
<image class="icon" src="/static/icon-nv.png"></image>28
</view>
</view>
<view class="items">
<image src="@/static/xin2.png"></image>
</view>
<view class="item">
<image class="avatar" src="@/static/nan.png"></image>
<view class="txt">空白空白2</view>
<view class="sex nan">
<image class="icon" src="/static/icon-nan.png"></image>29
</view>
</view>
</view>
</view>
</view>
<view class="tongcheng-start" v-if="isSucess == false">开始匹配</view>
<view class="tongcheng-end" v-else>
<view class="send">发送消息</view>
<view class="todo">继续探索</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isSucess: true,
background: {
// 导航栏背景图
background: 'url(@/static/tongcheng-bg.png) center top no-repeat',
// 还可以设置背景图size属性
backgroundSize: '100 auto',
},
};
}
}
</script>
<style scoped lang="scss">
.tongcheng{
background: #0d0b15 url(@/static/tongcheng-bg.png) center top no-repeat;
background-size: 100% auto;
overflow: hidden;
min-height: 100vh;
&-content{
text-align: center;
.title{
font-weight: 500;
font-size: 48rpx;
color: #FFFFFF;
margin-top: 120rpx;
}
.desc{
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 30rpx;
}
.dian{
width: 555rpx;
height: 410rpx;
background: url(@/static/tongcheng-xin.png) center top no-repeat;
background-size: 100% auto;
margin: 0 auto;
margin-top: 90rpx;
display: flex;
align-items: center;
justify-content: center;
.user{
display: flex;
justify-content: space-between;
margin-top: -10rpx;
margin-left: 20rpx;
.items{
width: 150rpx;
margin-top: 40rpx;
image{
width: 66rpx;
height: 52rpx;
}
}
.item{
width: 130rpx;
.avatar{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.txt{
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
margin-top: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
width: 150rpx;
}
.sex{
width: 120rpx;
height: 50rpx;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 10rpx;
&.nv{
background-color: #D750F3;
}
&.nan{
background-color: #6812A8;
}
image{
width: 22rpx;
height: 22rpx;
margin-right: 10rpx;
}
}
}
}
.info{
text-align: center;
margin-left: 60rpx;
image{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
}
.txt{
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 10rpx;
}
}
}
}
&-start{
position: absolute;
left: 50%;
margin-left: -150rpx;
bottom: 150rpx;
z-index: 21;
width: 300rpx;
height: 90rpx;
background: #232030;
border-radius: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
}
&-end{
width: 100%;
position: absolute;
left: 0;
bottom: 70rpx;
z-index: 21;
.send{
width: 300rpx;
height: 90rpx;
background: #232030;
border-radius: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin: 0 auto;
}
.todo{
width: 300rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 10rpx;
}
}
}
</style>

210
pages/pipei/tongcheng/index.vue
Unescape View File

@ -0,0 +1,210 @@
<template>
<view class="tongcheng">
<view class="tongcheng-navbar">
<u-navbar title="同城速配" back-icon-color="#ffffff" title-color="#ffffff" :background="background"></u-navbar>
</view>
<view class="tongcheng-content">
<view class="title">开始心电感应吧</view>
<view class="desc">马上配发一个小可爱</view>
<view class="dian">
<view class="info" v-if="isSucess == false">
<image src="@/static/nv.png"></image>
<view class="txt">空白</view>
</view>
<view class="user" v-else>
<view class="item">
<image class="avatar" src="@/static/nv.png"></image>
<view class="txt">空白空白1</view>
<view class="sex nv">
<image class="icon" src="/static/icon-nv.png"></image>28
</view>
</view>
<view class="items">
<image src="@/static/xin2.png"></image>
</view>
<view class="item">
<image class="avatar" src="@/static/nan.png"></image>
<view class="txt">空白空白2</view>
<view class="sex nan">
<image class="icon" src="/static/icon-nan.png"></image>29
</view>
</view>
</view>
</view>
</view>
<view class="tongcheng-start" v-if="isSucess == false">开始匹配</view>
<view class="tongcheng-end" v-else>
<view class="send">发送消息</view>
<view class="todo">继续探索</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isSucess: true,
background: {
// 导航栏背景图
background: 'url(@/static/tongcheng-bg.png) center top no-repeat',
// 还可以设置背景图size属性
backgroundSize: '100 auto',
},
};
}
}
</script>
<style scoped lang="scss">
.tongcheng{
background: #0d0b15 url(@/static/tongcheng-bg.png) center top no-repeat;
background-size: 100% auto;
overflow: hidden;
min-height: 100vh;
&-content{
text-align: center;
.title{
font-weight: 500;
font-size: 48rpx;
color: #FFFFFF;
margin-top: 120rpx;
}
.desc{
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 30rpx;
}
.dian{
width: 555rpx;
height: 410rpx;
background: url(@/static/tongcheng-xin.png) center top no-repeat;
background-size: 100% auto;
margin: 0 auto;
margin-top: 90rpx;
display: flex;
align-items: center;
justify-content: center;
.user{
display: flex;
justify-content: space-between;
margin-top: -10rpx;
margin-left: 20rpx;
.items{
width: 150rpx;
margin-top: 40rpx;
image{
width: 66rpx;
height: 52rpx;
}
}
.item{
width: 130rpx;
.avatar{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.txt{
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
margin-top: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
width: 150rpx;
}
.sex{
width: 120rpx;
height: 50rpx;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 10rpx;
&.nv{
background-color: #D750F3;
}
&.nan{
background-color: #6812A8;
}
image{
width: 22rpx;
height: 22rpx;
margin-right: 10rpx;
}
}
}
}
.info{
text-align: center;
margin-left: 60rpx;
image{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
}
.txt{
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 10rpx;
}
}
}
}
&-start{
position: absolute;
left: 50%;
margin-left: -150rpx;
bottom: 150rpx;
z-index: 21;
width: 300rpx;
height: 90rpx;
background: #232030;
border-radius: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
}
&-end{
width: 100%;
position: absolute;
left: 0;
bottom: 70rpx;
z-index: 21;
.send{
width: 300rpx;
height: 90rpx;
background: #232030;
border-radius: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin: 0 auto;
}
.todo{
width: 300rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 10rpx;
}
}
}
</style>

205
pages/pipei/yuyin/index.vue
Unescape View File

@ -0,0 +1,205 @@
<template>
<view class="tongcheng">
<view class="tongcheng-navbar">
<u-navbar title="语音速配" back-icon-color="#ffffff" title-color="#ffffff" :background="background"></u-navbar>
</view>
<view class="tongcheng-content">
<view class="title">正在寻找新朋友...</view>
<view class="desc">当前用户过多，请耐心等待</view>
<view class="dian">
<view class="user">
<view class="item">
<image class="avatar" src="@/static/nv.png"></image>
<view class="txt">空白空白1</view>
</view>
<view class="items">
<image src="@/static/yuyin-xin2.png"></image>
</view>
<view class="item">
<view class="pic">
<image class="avatar1" src="@/static/nan.png"></image>
<image class="avatar2" src="@/static/nan.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="tongcheng-end">
<view class="send">茫茫人海，今天和你相遇</view>
<view class="todo">
<image src="@/static/yuyin-cha.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isSucess: true,
background: {
// 导航栏背景图
background: 'url(@/static/yuyin-bg.png) center top no-repeat',
// 还可以设置背景图size属性
backgroundSize: '100 auto',
},
};
}
}
</script>
<style scoped lang="scss">
.tongcheng{
background: #0d0b15 url(@/static/yuyin-bg.png) center top no-repeat;
background-size: 100% auto;
overflow: hidden;
min-height: 100vh;
&-content{
text-align: center;
.title{
font-weight: 500;
font-size: 48rpx;
color: #FFFFFF;
margin-top: 120rpx;
}
.desc{
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 30rpx;
}
.dian{
width: 648rpx;
height: 648rpx;
background: url(@/static/yuyin-bg2.png) center top no-repeat;
background-size: 100% auto;
margin: 0 auto;
margin-top: 50rpx;
display: flex;
align-items: center;
justify-content: center;
.user{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: -10rpx;
margin-left: 20rpx;
.items{
width: 290rpx;
image{
width: 290rpx;
height: 86rpx;
}
}
.item{
width: 180rpx;
position: relative;
.avatar{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
}
.txt{
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
margin-top: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
width: 180rpx;
}
.pic{
width: 180rpx;
position: relative;
.avatar1{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
z-index: 3;
}
.avatar2{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
opacity: 0.3;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
}
}
}
.info{
text-align: center;
margin-left: 60rpx;
image{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
}
.txt{
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 10rpx;
}
}
}
}
&-start{
position: absolute;
left: 50%;
margin-left: -150rpx;
bottom: 150rpx;
z-index: 21;
width: 300rpx;
height: 90rpx;
background: #232030;
border-radius: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
}
&-end{
width: 100%;
position: absolute;
left: 0;
bottom: 70rpx;
z-index: 21;
.send{
width: 300rpx;
height: 90rpx;
background: #232030;
border-radius: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin: 0 auto;
}
.todo{
width: 300rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 10rpx;
}
}
}
</style>

BIN
static/icon-nan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 B

BIN
static/icon-nv.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 B

BIN
static/tongcheng-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
static/tongcheng-xin.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
static/xin2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
static/yuyin-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

BIN
static/yuyin-bg2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
static/yuyin-cha.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/yuyin-xin2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

Write Preview
Loading…
Cancel
Save