Leadfyy.co
/
blindDate
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的页面/专属红娘

master
石可 5 years ago
parent
eb7c896cb9
commit
b9b5f6e55e
5 changed files with 423 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      common/styles/theme.css
  2. 8
      package-lock.json
  3. 23
      pages.json
  4. 127
      pages/my/exclusive-match.vue
  5. 261
      pages/my/index.vue

6
common/styles/theme.css
View File

@ -140,6 +140,12 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
.lf-color-333{
color: #333333 !important;
}
.lf-color-222{
color: #222222!important;
}
.lf-color-777{
color: #777777!important;
}
.lf-color-blue {
color: #1998FE !important;

8
package-lock.json
View File

@ -1,5 +1,11 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {}
"dependencies": {
"tki-qrcode": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/tki-qrcode/-/tki-qrcode-0.1.6.tgz",
"integrity": "sha512-EnnlS8psowC7PsW3MDYcxvJYkuklX3WAZ/BYanR4TdBHTu74GfjTBX8Y16REP+AeDENiVtBPh4jtTRL2P736hQ=="
}
}
}

23
pages.json
View File

@ -6,7 +6,7 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "领峰UI",
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
},
@ -16,6 +16,22 @@
"navigationBarTitleText": "登录",
"enablePullDownRefresh": true
}
},
{
"path": "pages/my/index",
"style": {
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#FE3EA5",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/my/exclusive-match",
"style": {
"navigationBarTitleText": "专属红娘",
"navigationBarBackgroundColor": "#FE3EA5",
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {
@ -39,6 +55,11 @@
"iconPath": "static/tabbar/find.png",
"selectedIconPath": "static/tabbar/find-active.png",
"text": "登录"
},{
"pagePath": "pages/my/index",
"iconPath": "static/tabbar/find.png",
"selectedIconPath": "static/tabbar/find-active.png",
"text": "我的"
}]
}
}

127
pages/my/exclusive-match.vue
View File

@ -0,0 +1,127 @@
<template>
<view class="lf-w-100 lf-h-100">
<view class="pure_top">
<view class="tips-top">
<view class="lf-color-222 lf-font-32">私人专属红娘：可可小红娘｜可爱猪猪</view>
<view class="lf-color-555 lf-font-26 lf-m-t-20">添加专属红娘为好友，获得红线，帮您牵线搭桥</view>
<view class="lf-color-555 lf-font-26 lf-m-t-20">线下红娘服务，私人订制服务，全方位助您脱单</view>
</view>
</view>
<view class="qrcode-content">
<view class="lf-row-between lf-p-l-30 lf-p-r-30 content-title">
<view class="lf-flex">
<u-icon name="weixin-fill lf-m-r-15 lf-font-38"></u-icon><text class="lf-font-28 lf-color-222">微信：gyw38283</text>
</view>
<view class="content-btn" @click="copy(gyw38283)">
复制
</view>
</view>
<view class="qr-code">
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="270" unit="px" background="#fff"
foreground="#000" pdground="#000" :onval="true" :loadMake="true" />
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "tki-qrcode" // 二维码生成器
export default {
components: {
tkiQrcode
},
data() {
return {
base64Img: '',
checkArea: 'USI782936437829'
}
},
methods: {
//二维码回调
qrR(data) {
this.base64Img = data;
},
// 点击复制
copy(text) {
uni.setClipboardData({
data: text
});
}
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
.pure_top {
width: 100%;
height: 210rpx;
position: relative;
z-index: -1;
}
.pure_top::after {
content: '';
width: 140%;
height: 210rpx;
position: absolute;
left: -20%;
top: 0;
z-index: -1;
border-radius: 0 0 55% 55%;
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
}
.tips-top {
width: 686rpx;
height: 252rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 0 auto;
position: relative;
top: 60rpx;
padding: 50rpx 40rpx;
display: flex;
flex-direction: column;
/* justify-content: space-around; */
}
.qrcode-content {
width: 686rpx;
height: 703rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 0 auto;
margin-top: 133rpx;
}
.content-btn {
width: 122rpx;
height: 55rpx;
border-radius: 28rpx;
border: 1rpx solid #777777;
font-size: 24rpx;
color: #777;
font-weight: 400;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1rpx;
}
.content-title {
height: 100rpx;
border-bottom: 1rpx solid #F5F5F5;
}
.qr-code {
display: flex;
justify-content: center;
align-items: center;
margin: 30rpx 0;
}
</style>

261
pages/my/index.vue
View File

@ -0,0 +1,261 @@
<template>
<view class="lf-w-100 lf-h-100">
<view class="head-top">
<view class="lf-row-between pic-top">
<view class="lf-row-round">
<view>
<!-- <lf-image style="width: 160rpx;height: 160rpx;" src="../../static/logo.png"></lf-image> -->
<image src="../../static/logo.png" mode="widthFix" class="head-pic"></image>
</view>
<view class="head-left">
<view class="head-name">编号：73894 <u-icon name="arrow-right lf-m-l-20"></u-icon></view>
<view class="head-text">资料审核中</view>
</view>
</view>
<view class="lf-bg-white span-btn1">
获得红线
</view>
</view>
<view class="lf-row-between" style="height: 98rpx;padding: 0 32rpx;">
<view class="lf-row-round lf-flex-column">
<view class="lf-font-32 lf-color-white">0</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">红线</view>
</view>
<view class="lf-row-round lf-flex-column">
<view class="lf-font-32 lf-color-white">5</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">桃花</view>
</view>
<view class="lf-row-round lf-flex-column">
<view class="lf-font-32 lf-color-white">0</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">谁看过我</view>
</view>
<view class="lf-row-round lf-flex-column">
<view class="lf-font-32 lf-color-white">0</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">谁收藏我</view>
</view>
<view class="lf-row-round lf-flex-column">
<view class="lf-font-32 lf-color-white">70%</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">资料完整</view>
</view>
</view>
<view class="head-top-wrap lf-w-100 lf-h-100">
<view class="lf-w-100 tips-wrap">
<view class="tips">
<view class="lf-row-round lf-w-100 lf-h-100 lf-p-b-12">
<view class="lf-color-white lf-font-28">VIP会员｜拥有专属权益</view>
<view class="lf-bg-white span-btn">
了解详情
</view>
</view>
</view>
</view>
</view>
</view>
<view class="adv">
<view>
<image src="../../static/logo.png" mode="widthFix" class="adv-pic"></image>
</view>
<view class="adv-content">
<view class="lf-color-222 lf-font-32 lf-m-b-15">
专属服务定制
</view>
<view class="lf-color-777">促成您和心仪对象线下见面 <u-icon class="lf-m-l-20" name="arrow-right"></u-icon></view>
</view>
</view>
<view class="classify lf-m-t-30">
<view class="card" v-for="(item,index) in list" @click="$url(item.path)">
<view>
<u-icon class="classify-icon" :name="item.icon"></u-icon>
</view>
<view>
{{item.name}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusive-match'},
{name: '实名认证',icon:'email'},
{name: '我的收藏',icon:'qzone'},
{name: '我的动态',icon:'moments'},
{name: '福利中心',icon:'red-packet'},
{name: '公众号',icon:'google-circle-fill'},
{name: '联系客服',icon:'kefu-ermai'},
{name: '设置',icon:'setting'}
]
}
}
}
</script>
<style lang="scss">
page {
background-color: #F5F5F5;
}
.head-top {
width: 100%;
height: 562rpx;
/* background-color: red; */
}
.head-top-wrap {
width: 100%;
height: 656rpx;
/* z-index: -1; */
overflow: hidden;
position: relative;
}
.head-top::after {
content: '';
width: 100%;
height: 525rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
border-radius: 0 586px 586px/0 0 200rpx 200rpx;
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
}
.tips-wrap {
overflow: hidden;
height: 656rpx;
border-radius: 0 586px 586px/0 0 200rpx 200rpx;
position: absolute;
top: -494rpx;
}
.tips {
width: 686rpx;
height: 121rpx;
background-color: #314177;
border-radius: 20rpx;
position: relative;
bottom: -536rpx;
left: 0;
margin: 0 auto;
}
.span-btn {
border-radius: 25rpx;
width: 149rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #314177;
}
.head-pic {
width: 160rpx;
height: 160rpx;
border: 5rpx solid #FFFFFF;
border-radius: 50%;
}
.adv-pic {
width: 135rpx;
height: 135rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.head-text {
font-size: 28rpx;
color: #FFFFFF;
font-weight: 400;
line-height: 40rpx;
}
.pic-top {
padding: 48rpx 32rpx 40rpx 48rpx;
}
.span-btn1 {
border-radius: 25rpx;
width: 149rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #E21196;
font-weight: 400;
line-height: 33rpx;
}
.head-name {
font-weight: 500;
color: #FFFFFF;
line-height: 45rpx;
letter-spacing: 1rpx;
font-size: 32rpx;
}
.head-left {
padding: 20rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.adv {
width: 686rpx;
height: 195rpx;
background-color: white;
border-radius: 20rpx;
margin: 0 auto;
display: flex;
padding: 0 0 0 30rpx;
/* justify-content: space-around; */
align-items: center;
}
.adv-content {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.classify {
width: 686rpx;
display: flex;
background-color: white;
border-radius: 20rpx;
margin: 0 auto;
flex-wrap: wrap;
padding: 38rpx 30rpx;
}
.card {
width: 116rpx;
height: 116rpx;
text-align: center;
position: relative;
overflow: hidden;
margin-right: 54rpx;
// margin-bottom: 68rpx;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-child(n + 5) {
margin-top: 68rpx;
}
}
.classify-icon {
height: 45rpx;
width: 45rpx;
font-size: 45rpx;
margin-bottom: 27rpx;
}
</style>
Write Preview
Loading…
Cancel
Save