邓平艺
4 years ago
5 changed files with 797 additions and 3 deletions
-
62common/styles/iconfont.css
-
386components/lf-swiper/lf-swiper.vue
-
14pages.json
-
171pages/user/member/explain.vue
-
167pages/user/member/quanyi.vue
@ -0,0 +1,386 @@ |
|||
<template> |
|||
<view class="u-swiper-wrap" :style="{borderRadius: `${borderRadius}rpx`}"> |
|||
<swiper :current="elCurrent" @change="change" |
|||
@animationfinish="animationfinish" |
|||
:interval="interval" :circular="circular" |
|||
:duration="duration" :autoplay="autoplay" |
|||
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" |
|||
:next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" |
|||
:style="{height: height + 'rpx',backgroundColor: bgColor}"> |
|||
<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index"> |
|||
<view class="u-list-image-wrap" |
|||
@tap.stop.prevent="listClick(index)" |
|||
:class="[uCurrent != index ? 'u-list-scale' : '']" |
|||
:style="{borderRadius: `${borderRadius}rpx`, |
|||
transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)', |
|||
margin: effect3d && uCurrent != index ? '0 20rpx' : 0 |
|||
}"> |
|||
<!-- 图片 --> |
|||
<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image> |
|||
<!-- 自己加的内容 --> |
|||
<view class="swiper-diy-left" @click.stop.prevent="$emit('clickDiy', {'index': index, 'type': 'btn1'})"> |
|||
<text>查看会员权益和细则</text> |
|||
</view> |
|||
<view class="swiper-diy-right" @click.stop.prevent="$emit('clickDiy', {'index': index, 'type': 'btn2'})"> |
|||
<text class="lf-iconfont icon-erweima lf-font-30"></text> |
|||
</view> |
|||
|
|||
<view v-if="title && item.title" class="u-swiper-title u-line-1" |
|||
:style="[{'padding-bottom': titlePaddingBottom}, titleStyle]"> |
|||
{{ item.title }} |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="u-swiper-indicator" :style="{ |
|||
top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto', |
|||
bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto', |
|||
justifyContent: justifyContent, |
|||
padding: `0 ${effect3d ? '74rpx' : '24rpx'}` |
|||
}"> |
|||
<block v-if="mode == 'rect'"> |
|||
<view class="u-indicator-item-rect" |
|||
:class="{ 'u-indicator-item-rect-active': index == uCurrent }" |
|||
v-for="(item, index) in list" :key="index"> |
|||
</view> |
|||
</block> |
|||
<block v-if="mode == 'dot'"> |
|||
<view class="u-indicator-item-dot" |
|||
:class="{ 'u-indicator-item-dot-active': index == uCurrent }" |
|||
v-for="(item, index) in list" :key="index"> |
|||
</view> |
|||
</block> |
|||
<block v-if="mode == 'round'"> |
|||
<view class="u-indicator-item-round" |
|||
:class="{ 'u-indicator-item-round-active': index == uCurrent }" |
|||
v-for="(item, index) in list" :key="index"> |
|||
</view> |
|||
</block> |
|||
<block v-if="mode == 'number'"> |
|||
<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* swiper 轮播图 |
|||
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用 |
|||
* @tutorial https://www.uviewui.com/components/swiper.html |
|||
* @property {Array} list 轮播图数据，见官网"基本使用"说明 |
|||
* @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false） |
|||
* @property {String} mode 指示器模式，见官网说明（默认round） |
|||
* @property {String Number} height 轮播图组件高度，单位rpx（默认250） |
|||
* @property {String} indicator-pos 指示器的位置（默认bottomCenter） |
|||
* @property {Boolean} effect3d 是否开启3D效果（默认false） |
|||
* @property {Boolean} autoplay 是否自动播放（默认true） |
|||
* @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500） |
|||
* @property {Boolean} circular 是否衔接播放，见官网说明（默认true） |
|||
* @property {String} bg-color 背景颜色（默认#f3f4f6） |
|||
* @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8） |
|||
* @property {Object} title-style 自定义标题样式 |
|||
* @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50） |
|||
* @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill） |
|||
* @event {Function} click 点击轮播图时触发 |
|||
* @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper> |
|||
*/ |
|||
export default { |
|||
name: "u-swiper", |
|||
props: { |
|||
// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选 |
|||
list: { |
|||
type: Array, |
|||
default () { |
|||
return []; |
|||
} |
|||
}, |
|||
// 是否显示title标题 |
|||
title: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 用户自定义的指示器的样式 |
|||
indicator: { |
|||
type: Object, |
|||
default () { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 圆角值 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 8 |
|||
}, |
|||
// 隔多久自动切换 |
|||
interval: { |
|||
type: [String, Number], |
|||
default: 3000 |
|||
}, |
|||
// 指示器的模式，rect|dot|number|round |
|||
mode: { |
|||
type: String, |
|||
default: 'round' |
|||
}, |
|||
// list的高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 250 |
|||
}, |
|||
// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight |
|||
indicatorPos: { |
|||
type: String, |
|||
default: 'bottomCenter' |
|||
}, |
|||
// 是否开启缩放效果 |
|||
effect3d: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 3D模式的情况下，激活item与前后item之间的距离，单位rpx |
|||
effect3dPreviousMargin: { |
|||
type: [Number, String], |
|||
default: 50 |
|||
}, |
|||
// 是否自动播放 |
|||
autoplay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 自动轮播时间间隔，单位ms |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 500 |
|||
}, |
|||
// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张 |
|||
circular: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 图片的裁剪模式 |
|||
imgMode: { |
|||
type: String, |
|||
default: 'aspectFill' |
|||
}, |
|||
// 从list数组中读取的图片的属性名 |
|||
name: { |
|||
type: String, |
|||
default: 'image' |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#f3f4f6' |
|||
}, |
|||
// 初始化时，默认显示第几项 |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 标题的样式，对象形式 |
|||
titleStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出 |
|||
list(nVal, oVal) { |
|||
if(nVal.length !== oVal.length) this.uCurrent = 0; |
|||
}, |
|||
// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent， |
|||
// 就会错乱，因为指示器是依赖于uCurrent的 |
|||
current(n) { |
|||
this.uCurrent = n; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
uCurrent: this.current // 当前活跃的swiper-item的index |
|||
}; |
|||
}, |
|||
computed: { |
|||
justifyContent() { |
|||
if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start'; |
|||
if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center'; |
|||
if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end'; |
|||
}, |
|||
titlePaddingBottom() { |
|||
let tmp = 0; |
|||
if (this.mode == 'none') return '12rpx'; |
|||
if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') { |
|||
tmp = '60rpx'; |
|||
} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') { |
|||
tmp = '40rpx'; |
|||
} else { |
|||
tmp = '12rpx'; |
|||
} |
|||
return tmp; |
|||
}, |
|||
// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换 |
|||
elCurrent() { |
|||
return Number(this.current); |
|||
} |
|||
}, |
|||
methods: { |
|||
listClick(index) { |
|||
this.$emit('click', index); |
|||
}, |
|||
change(e) { |
|||
let current = e.detail.current; |
|||
this.uCurrent = current; |
|||
// 发出change事件，表示当前自动切换的index，从0开始 |
|||
this.$emit('change', current); |
|||
}, |
|||
// 头条小程序不支持animationfinish事件，改由change事件 |
|||
// 暂不监听此事件，因为不再给swiper绑定uCurrent属性 |
|||
animationfinish(e) { |
|||
// #ifndef MP-TOUTIAO |
|||
// this.uCurrent = e.detail.current; |
|||
// #endif |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// @import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-swiper-wrap { |
|||
position: relative; |
|||
overflow: hidden; |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.u-swiper-image { |
|||
width: 100%; |
|||
will-change: transform; |
|||
height: 100%; |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
/* #ifdef H5 */ |
|||
pointer-events: none; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-swiper-indicator { |
|||
padding: 0 24rpx; |
|||
position: absolute; |
|||
// @include vue-flex; |
|||
display: flex; |
|||
flex-direction: row; |
|||
|
|||
width: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.u-indicator-item-rect { |
|||
width: 26rpx; |
|||
height: 8rpx; |
|||
margin: 0 6rpx; |
|||
transition: all 0.5s; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.u-indicator-item-rect-active { |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-indicator-item-dot { |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
margin: 0 6rpx; |
|||
border-radius: 20rpx; |
|||
transition: all 0.5s; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.u-indicator-item-dot-active { |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-indicator-item-round { |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
margin: 0 6rpx; |
|||
border-radius: 20rpx; |
|||
transition: all 0.5s; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.u-indicator-item-round-active { |
|||
width: 34rpx; |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-indicator-item-number { |
|||
padding: 6rpx 16rpx; |
|||
line-height: 1; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
border-radius: 100rpx; |
|||
font-size: 26rpx; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-list-scale { |
|||
transform-origin: center center; |
|||
} |
|||
|
|||
.u-list-image-wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
flex: 1; |
|||
transition: all 0.5s; |
|||
overflow: hidden; |
|||
box-sizing: content-box; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-swiper-title { |
|||
position: absolute; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
padding: 12rpx 24rpx; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
.u-swiper-item { |
|||
// @include vue-flex; |
|||
overflow: hidden; |
|||
align-items: center; |
|||
|
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.swiper-diy-left, .swiper-diy-right{ |
|||
position: absolute; |
|||
bottom: 40rpx; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.swiper-diy-left{ |
|||
left: 40rpx; |
|||
width: 246rpx; |
|||
height: 49rpx; |
|||
border-radius: 24rpx; |
|||
border: 1rpx solid #FFFFFF; |
|||
font-size: 24rpx; |
|||
} |
|||
.swiper-diy-right{ |
|||
right: 40rpx; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
background-color: rgba(0,0,0,0.5); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="会员权益" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav> |
|||
<view class="head"> |
|||
<view class="bg-left"></view> |
|||
<view class="bg-right"></view> |
|||
<scroll-view class="scroll-view" :scroll-x="true" :scroll-into-view="oView"> |
|||
<view class="head-content"> |
|||
<view class="item" :id="'view-'+ index" |
|||
:style="{width: 100 / 4 +'%'}" |
|||
v-for="(item, index) in 5" :key="index" |
|||
@click="current = index"> |
|||
<view class="icon"> |
|||
<text class="lf-iconfont icon-huiyuan2 lf-color-primary lf-font-60"></text> |
|||
</view> |
|||
<view class="name">免费雨伞租赁</view> |
|||
<view class="active" v-if="current == index"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<view class="primary-title">平时2倍积分</view> |
|||
<view class="secondary-title">适用人群</view> |
|||
<view class="text">金卡</view> |
|||
<view class="secondary-title">特权内容</view> |
|||
<view class="text"> |
|||
<view>1、平日购物，结账时出示“会员码”，尊享2倍积分；</view> |
|||
<view>2、平日购物，结账时出示“会员码”，尊享2倍积分；</view> |
|||
<view>3、平日购物，结账时出示“会员码”，尊享2倍积分；平日购物，结账时出示“会员码”，尊享2倍积分</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
current: null, // 当前选中的下标 |
|||
oView: '' // scroll跳转到哪个view下 |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
// TODO 待对接传入current |
|||
// setTimeout(() => { |
|||
// this.current = options.current; |
|||
// this.oView = `view-${options.current}`; |
|||
// }, 500); |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
overflow-x: hidden; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped="scoped"> |
|||
.head{ |
|||
width: 750rpx; |
|||
height: 443rpx; |
|||
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); |
|||
position: relative; |
|||
overflow: hidden; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
box-sizing: border-box; |
|||
color: #FFFFFF; |
|||
.bg-left{ |
|||
position: absolute; |
|||
width: 196rpx; |
|||
height: 196rpx; |
|||
border-radius: 50%; |
|||
background-color: rgba(255,255,255,0.04); |
|||
left: -92rpx; |
|||
bottom: 60rpx; |
|||
} |
|||
.bg-right{ |
|||
position: absolute; |
|||
width: 520rpx; |
|||
height: 520rpx; |
|||
border-radius: 50%; |
|||
background-color: rgba(255,255,255,0.04); |
|||
right: -168rpx; |
|||
top: -122rpx; |
|||
} |
|||
.scroll-view{ |
|||
height: 236rpx; |
|||
width: 750rpx; |
|||
.head-content{ |
|||
width: max-content; |
|||
height: 236rpx; |
|||
display: flex; |
|||
.item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
position: relative; |
|||
.icon{ |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #FFFFFF; |
|||
} |
|||
.name{ |
|||
width: 148rpx; |
|||
margin-top: 10rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
.active{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: calc(50% - 25rpx); |
|||
width: 0rpx; |
|||
height: 0rpx; |
|||
border-left: 25rpx solid transparent; |
|||
border-right: 25rpx solid transparent; |
|||
border-bottom: 28rpx solid #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content{ |
|||
padding: 30rpx 32rpx; |
|||
.primary-title{ |
|||
font-size: 32rpx; |
|||
color: #222222; |
|||
font-weight: bold; |
|||
position: relative; |
|||
width: max-content; |
|||
z-index: 2; |
|||
margin-bottom: 60rpx; |
|||
&::before{ |
|||
position: absolute; |
|||
content: ''; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 16rpx; |
|||
border-radius: 8rpx; |
|||
background-color: #8AB8B7; |
|||
z-index: -1; |
|||
} |
|||
} |
|||
.secondary-title{ |
|||
font-size: 28rpx; |
|||
color: #777777; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.text{ |
|||
font-size: 28rpx; |
|||
color: #222222; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="会员权益" :showIcon="true" titleColor="#fff" bgColor="#15716E"></lf-nav> |
|||
<view class="head"> |
|||
<image class="img"></image> |
|||
<view class="phone">182****5380</view> |
|||
</view> |
|||
<view> |
|||
<lf-swiper :list="card_list" |
|||
:height="350" :effect3d="true" |
|||
bg-color="#15716E" mode="none" |
|||
@clickDiy="swiperClickDiy"> |
|||
</lf-swiper> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="item" :style="{width: 100 / 4 +'%'}" |
|||
v-for="(item, index) in quanyi_list" :key="index" |
|||
@click="$url('/pages/user/member/explain')"> |
|||
<view class="icon"> |
|||
<text class="lf-iconfont lf-color-primary lf-font-60" :class="item.icon"></text> |
|||
</view> |
|||
<view class="name">{{ item.name }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import lfSwiper from '@/components/lf-swiper/lf-swiper.vue'; |
|||
export default { |
|||
components: { |
|||
lfSwiper |
|||
}, |
|||
data(){ |
|||
return { |
|||
card_list: [{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
title: '昨夜星辰昨夜风，画楼西畔桂堂东' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', |
|||
title: '身无彩凤双飞翼，心有灵犀一点通' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg', |
|||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
|||
} |
|||
], |
|||
quanyi_list: [{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '平日2倍积分' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '生日5倍积分' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '免费停车6小时/天' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '最低8.5折' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '专属沙龙' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '会员日' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '免费包装' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '书籍租借' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '免费雨伞租赁' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '免费童车租赁' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '免费轮椅租赁' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '通惠卡' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '多重生日礼遇' |
|||
},{ |
|||
icon: 'icon-huiyuan2', |
|||
name: '每日尊享饮品' |
|||
}] |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
swiperClickDiy(event){ |
|||
let item = this.card_list[event.index]; |
|||
|
|||
if(event.type == 'btn1'){ |
|||
this.$msg('敬请期待'); |
|||
}else if(event.type == 'btn2'){ |
|||
this.$url('/pages/user/member/code'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
background-color: #15716E; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped="scoped"> |
|||
.head{ |
|||
padding: 30rpx 32rpx; |
|||
width: 750rpx; |
|||
height: max-content; |
|||
display: flex; |
|||
align-items: center; |
|||
.img{ |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border: 2rpx solid #FFFFFF; |
|||
border-radius: 50%; |
|||
background-color: #000000; |
|||
} |
|||
.phone{ |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.content{ |
|||
padding: 60rpx 32rpx 30rpx; |
|||
width: 750rpx; |
|||
height: max-content; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.item{ |
|||
height: max-content; |
|||
padding: 0 12rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin-bottom: 40rpx; |
|||
.icon{ |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #FFFFFF; |
|||
} |
|||
.name{ |
|||
margin-top: 10rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue