|
|
<template>
|
|
|
<view class="container">
|
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
|
<view class="wrap">
|
|
|
<view class="me">
|
|
|
<image class="me-top" :src="base.imgHost('me-top.png')"></image>
|
|
|
<view class="me-wrap">
|
|
|
<view class="me-name">
|
|
|
<view class="me-name-left">
|
|
|
<image mode="widthFix" :src="base.imgHost('login-logo.png')"></image>
|
|
|
<view class="userinfo">
|
|
|
<view class="userinfo-img" @click="changeAvatar">
|
|
|
<image :src="userAvatar?userAvatar:base.imgHost('logo-add.png')"></image>
|
|
|
</view>
|
|
|
<view>
|
|
|
<view class="usersigns">
|
|
|
<text>姓名：</text>
|
|
|
<text>{{userInfo.username?userInfo.username:'-'}}</text>
|
|
|
</view>
|
|
|
<view class="usersigns" v-if="userInfo.no">
|
|
|
<text>学号：</text>
|
|
|
<text>{{userInfo.no?userInfo.no:'-'}}</text>
|
|
|
</view>
|
|
|
<view class="usersigns" v-if="course_signs.length>0">
|
|
|
<block v-if="course_signs[0]['course']">
|
|
|
<text>学籍：</text>
|
|
|
<text>{{course_signs[0]['course'].year?course_signs[0]['course'].year+'年':''}}{{course_signs[0]['course'].type_detail?course_signs[0]['course']['type_detail'].name+"|":''}}{{course_signs[0]['course'].name}}</text>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="myQrcode" class="me-name-right usercode" @click="showBigCode=true">
|
|
|
<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode"
|
|
|
:sizeUnit="'rpx'" :size="160"
|
|
|
:options="{
|
|
|
margin: 10,
|
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
|
}"></uqrcode>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="menu">
|
|
|
<view @click="refreshCode">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon3.png')" style="width:51rpx;height:46rpx;"></image>
|
|
|
<text>电子校友卡</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<view @click="toUrl(2)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon1.png')" style="width:52rpx;height:48rpx;"></image>
|
|
|
<text>我的课程</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<!-- <view @click="toUrl(6)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon1.png')" style="width:52rpx;height:48rpx;"></image>
|
|
|
<text>学院日程</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view> -->
|
|
|
<view @click="toUrl(3)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon2.png')" style="width:50rpx;height:50rpx;"></image>
|
|
|
<text>我的预约</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<view @click="toUrl(5)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon6.png')" style="width:47rpx;height:50rpx;"></image>
|
|
|
<text>我要捐赠</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<view @click="toUrl(1)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon7.png')" style="width:48rpx;height:52rpx;"></image>
|
|
|
<text>个人信息</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<view @click="showGzh = true">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon4.png')" style="width:50rpx;height:47rpx;"></image>
|
|
|
<text>关注公众号</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<view @click="toUrl(4)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon5.png')" style="width:48rpx;height:52rpx;"></image>
|
|
|
<text>联系我们</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<!-- 校友卡 -->
|
|
|
<view class="modal-wrap" v-if="showCard">
|
|
|
<view class="modal-image">
|
|
|
<view class="modal-close" @click="showCard = false">X</view>
|
|
|
<image mode="widthFix" :src="base.imgHost('me-xyk1.png')"></image>
|
|
|
</view>
|
|
|
|
|
|
<view class="modal-xyk">
|
|
|
<view>
|
|
|
<!-- <view style="margin-bottom:40rpx;text-align: center;">电子校园卡</view> -->
|
|
|
<view class="modal-xyk-between">
|
|
|
<view class="modal-xyk-item modal-xyk-code">
|
|
|
<view style="display: flex;justify-content: center;" @click="bigCode">
|
|
|
<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode"
|
|
|
:sizeUnit="'rpx'" :size="200" :options="{
|
|
|
margin: 10,
|
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
|
}"></uqrcode>
|
|
|
</view>
|
|
|
<view class="modal-xyk-item-reload" @click="getQrCode" v-if="myQrcode">
|
|
|
<image :src="base.imgHost('me-reload.png')"></image>
|
|
|
<view>点击二维码刷新</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-xyk-item modal-xyk-name">
|
|
|
<view class="modal-xyk-name-img">
|
|
|
<image :src="userAvatar?userAvatar:base.imgHost('logo-user.png')"></image>
|
|
|
</view>
|
|
|
<view class="modal-xyk-name-course">
|
|
|
<text>姓名：</text>
|
|
|
<text>{{userInfo.username}}</text>
|
|
|
</view>
|
|
|
<view class="modal-xyk-name-course">
|
|
|
<text>学号：</text>
|
|
|
<text>{{userInfo.no?userInfo.no:'-'}}</text>
|
|
|
</view>
|
|
|
<view class="modal-xyk-name-course" v-if="course_signs.length>0">
|
|
|
<block v-if="course_signs[0]['course']">
|
|
|
<text>学籍：</text>
|
|
|
<text>{{course_signs[0]['course'].year?course_signs[0]['course'].year+'年':''}}{{course_signs[0]['course'].type_detail?course_signs[0]['course']['type_detail'].name+"|":''}}{{course_signs[0]['course'].name}}</text>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 公众号 -->
|
|
|
<view class="modal-wrap" v-if="showGzh">
|
|
|
<view class="modal-image" style="height:68%;text-align: center;">
|
|
|
<view class="modal-close" @click="showGzh = false">X</view>
|
|
|
<image mode="heightFix" style="height:100%" show-menu-by-longpress :show-menu-by-longpress="true"
|
|
|
:src="base.imgHost('me-gzh.png')"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 进入后没有手机号的话 绑定 或者 注册 -->
|
|
|
<view class="modal">
|
|
|
<u-popup v-model="showRegister" mode="bottom">
|
|
|
<view>
|
|
|
<view class="modal-tip">提示</view>
|
|
|
<view class="modal-content">
|
|
|
<view>如您已是我方校友，请先绑定账号</view>
|
|
|
<view @click="goBind" class="modal-bind">
|
|
|
去绑定
|
|
|
</view>
|
|
|
<view>如您还不是我方校友，请先注册</view>
|
|
|
<view @click="toRegister" class="modal-register">
|
|
|
去注册
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
<view v-if="showBigCode" class="big">
|
|
|
<view class="big-wrap">
|
|
|
<view class="big-close" @click='showBigCode=false'>X</view>
|
|
|
<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode" :sizeUnit="'rpx'"
|
|
|
:size="600" :options="{
|
|
|
margin: 10,
|
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
|
}"></uqrcode>
|
|
|
</view>
|
|
|
</view>
|
|
|
<tabbar :currentPage="3"></tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
|
|
|
import tabbar from '@/components/tabbar/tabbar.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
tabbar,
|
|
|
uqrcode
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showRegister: false,
|
|
|
userAvatar:'',
|
|
|
type: 'register',
|
|
|
showGzh: false,
|
|
|
showCard: false,
|
|
|
userInfo: {},
|
|
|
hasMobile: false,
|
|
|
course_signs: [],
|
|
|
showBigCode: false,
|
|
|
myQrcode: 'STBC',
|
|
|
timer: null
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
title: "苏州科技商学院",
|
|
|
imageUrl: "/static/share.jpg"
|
|
|
}
|
|
|
},
|
|
|
onShareTimeline() {
|
|
|
return {
|
|
|
title: "苏州科技商学院",
|
|
|
imageUrl: "/static/share.jpg"
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
this.showRegister = false
|
|
|
this.getUserInfo()
|
|
|
let that = this
|
|
|
if (!this.timer) {
|
|
|
this.timer = setInterval(function() {
|
|
|
that.getQrCode()
|
|
|
}, 3 * 60 * 1000)
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
|
onUnload() {
|
|
|
if (this.timer) {
|
|
|
clearInterval(this.timer)
|
|
|
this.timer = null
|
|
|
}
|
|
|
},
|
|
|
onHide() {
|
|
|
if (this.timer) {
|
|
|
clearInterval(this.timer)
|
|
|
this.timer = null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
refreshCode() {
|
|
|
if (!this.hasMobile) {
|
|
|
this.base.toast("请先绑定或注册")
|
|
|
this.showRegister = true
|
|
|
return
|
|
|
}
|
|
|
this.showCard = true
|
|
|
},
|
|
|
bigCode() {
|
|
|
this.showCard = false
|
|
|
this.showBigCode = true
|
|
|
},
|
|
|
changeAvatar(){
|
|
|
uni.navigateTo({
|
|
|
url:'/packages/avatarUpload/index'
|
|
|
})
|
|
|
},
|
|
|
toUrl(type) {
|
|
|
if (type === 1 || type === 2 || type === 3) {
|
|
|
if (!this.hasMobile) {
|
|
|
this.base.toast("请先绑定或注册")
|
|
|
this.showRegister = true
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
if (type === 1) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/my/index'
|
|
|
})
|
|
|
} else if (type === 2) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/mycourse/index'
|
|
|
})
|
|
|
} else if (type === 3) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/mybook/index'
|
|
|
})
|
|
|
} else if (type === 4) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/webview/index?type=4'
|
|
|
})
|
|
|
} else if (type === 5) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/donate/index'
|
|
|
})
|
|
|
} else if (type === 6) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/courseCalendar/index'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
getUserInfo() {
|
|
|
this.$u.api.user().then(res => {
|
|
|
console.log("res", res)
|
|
|
this.$u.vuex('vuex_user', res.user)
|
|
|
this.userInfo = res.user
|
|
|
this.course_signs = res.user.course_signs ? res.user.course_signs : []
|
|
|
this.myQrcode = res.course_signs ? res.course_signs.qrcode : 'STBC'
|
|
|
this.userAvatar = res.user.headimgurl?res.user.headimgurl:''
|
|
|
if (this.base.isNull(res.user.mobile)) {
|
|
|
this.showRegister = true
|
|
|
this.hasMobile = false
|
|
|
} else {
|
|
|
this.showRegister = false
|
|
|
this.hasMobile = true
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getQrCode() {
|
|
|
uni.showLoading({
|
|
|
title: '...'
|
|
|
})
|
|
|
this.$u.api.user().then(res => {
|
|
|
this.myQrcode = res.course_signs ? res.course_signs.qrcode : 'STBC'
|
|
|
setTimeout(function() {
|
|
|
uni.hideLoading()
|
|
|
}, 500)
|
|
|
})
|
|
|
},
|
|
|
// 去绑定登录
|
|
|
goBind() {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/register/login'
|
|
|
})
|
|
|
},
|
|
|
// 去注册
|
|
|
toRegister() {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/register/index'
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.container {
|
|
|
padding: 30rpx;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
|
|
|
.cbg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.wrap {
|
|
|
position: relative;
|
|
|
height: calc(100% - 60rpx);
|
|
|
|
|
|
.me {
|
|
|
width: 690rpx;
|
|
|
height: 435rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&-top {
|
|
|
width: 690rpx;
|
|
|
height: 435rpx;
|
|
|
}
|
|
|
|
|
|
&-wrap {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
position: absolute;
|
|
|
top: 0rpx;
|
|
|
left: 0;
|
|
|
padding: 30rpx;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
&-name {
|
|
|
width: 100%;
|
|
|
color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
padding: 0 20rpx;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
&-left {
|
|
|
width:100%;
|
|
|
&>image {
|
|
|
width: 200rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
// height: 110rpx;
|
|
|
// margin-right: 20rpx;
|
|
|
}
|
|
|
.userinfo {
|
|
|
line-height: 1.5;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
// margin-top: 40rpx;
|
|
|
image {
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
margin-right: 30rpx;
|
|
|
border-radius: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.usersigns {
|
|
|
display: flex;
|
|
|
|
|
|
&>text:first-child {
|
|
|
width: 100rpx;
|
|
|
}
|
|
|
|
|
|
&>text:last-child {
|
|
|
width: calc(100% - 100rpx);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.usercode {
|
|
|
width: 160rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.menu {
|
|
|
position: absolute;
|
|
|
top: 320rpx;
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
// z-index: 999;
|
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
|
height: calc(100% - 320rpx);
|
|
|
padding: 40rpx;
|
|
|
overflow: scroll;
|
|
|
|
|
|
&>view {
|
|
|
padding: 30rpx;
|
|
|
color: #666;
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
&>view:first-child {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
text {
|
|
|
margin-left: 20rpx
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modal {
|
|
|
::v-deep .u-drawer-bottom {
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
&-tip {
|
|
|
text-align: center;
|
|
|
padding: 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
height: 450rpx;
|
|
|
padding: 0 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
&>view {
|
|
|
margin: 30rpx auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-bind {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
|
}
|
|
|
|
|
|
&-register {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modal-wrap {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
|
.modal-close {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
text-align: center;
|
|
|
line-height: 80rpx;
|
|
|
color: #fff;
|
|
|
background: #6e6e77;
|
|
|
border-radius: 80rpx;
|
|
|
position: absolute;
|
|
|
top: -90rpx;
|
|
|
right: 0rpx;
|
|
|
}
|
|
|
|
|
|
.modal-image {
|
|
|
position: absolute;
|
|
|
top: 48%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
// height: 60%;
|
|
|
width: calc(100% - 60rpx);
|
|
|
|
|
|
&>image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.modal-xyk {
|
|
|
position: absolute;
|
|
|
top: 57%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
// height: 70%;
|
|
|
color: #fff;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
|
|
|
&>view {
|
|
|
width: 100%;
|
|
|
padding: 30rpx;
|
|
|
}
|
|
|
|
|
|
&-between {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
padding: 20rpx 60rpx;
|
|
|
padding-left:30rpx;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
&>view {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
&-reload {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
// padding: 10rpx 40rpx;
|
|
|
justify-content: center;
|
|
|
margin-top: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
image {
|
|
|
width: 27rpx;
|
|
|
height: 25rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&-code{
|
|
|
width: 270rpx;
|
|
|
/* margin-right: 10rpx; */
|
|
|
border-right: 1rpx solid rgba(255,255,255,0.2);
|
|
|
padding-right: 30rpx;
|
|
|
}
|
|
|
&-name {
|
|
|
width: calc(100% - 310rpx);
|
|
|
margin-right: 0;
|
|
|
|
|
|
&>view {
|
|
|
text-align: left;
|
|
|
// margin-bottom: 20rpx;
|
|
|
}
|
|
|
&-img{
|
|
|
image{
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
margin-left: 30rpx;
|
|
|
margin-bottom:10rpx;
|
|
|
border-radius: 100%;
|
|
|
}
|
|
|
}
|
|
|
&-course {
|
|
|
display: flex;
|
|
|
margin-bottom:10rpx;
|
|
|
&>text:first-child {
|
|
|
width: 100rpx;
|
|
|
}
|
|
|
|
|
|
&>text:last-child {
|
|
|
width: calc(100% - 100rpx);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.big {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
overflow: scroll;
|
|
|
|
|
|
&-wrap {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 500rpx;
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
&-close {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
text-align: center;
|
|
|
line-height: 80rpx;
|
|
|
color: #fff;
|
|
|
background: #6e6e77;
|
|
|
border-radius: 80rpx;
|
|
|
position: absolute;
|
|
|
top: -80rpx;
|
|
|
right: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
