7.21 杭州源创会火热报名中,一起来看看移动开发如何紧跟浪潮?
Watch Star Fork

Vincent丶 / PocketCampusJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
QD校园前端项目
一键复制 编辑 原始数据 按行查看 历史
snacks.vue 21.00 KB vincent 提交于 2018-01-10 00:37 . 添加零食盒子功能模块
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
<template>
<div class="snacks-wrapper">
<mt-swipe :auto="5000" :speed="600" style="position: relative; height: 162px;" ref="banner">
<mt-swipe-item v-for="item in banner" :key="item.id" :style="{backgroundImage: 'url(' + item.src + ')' }" class="banner"></mt-swipe-item>
</mt-swipe>
<scroll :data="goodsList" @scroll="scroll" :listen-scroll="listenScroll" :probe-type="probeType" class="list" ref="list">
<div class="goods-wrapper" ref="goodsWrapper" >
<div v-for="goods in goodsList" :key="goods.id" class="goods" :ref="'goods-' + goods.id">
<div class="thumb">
<img alt="小盒爆米花" title="小盒爆米花" :src="goods.thumb" />
</div>
<div class="content">
<h1>{{goods.name}}</h1>
<div class="desc">
<span>{{goods.desc}}</span>
<span style="padding-left: 0 5px; font-size: 14px; min-width: 45px;">剩余:
<font style="color: red">{{goods.surplus}}</font>
</span>
</div>
<div class="footer">
<div>
<span class="discount">{{goods.discount + ''}}</span>
<span class="marketPrice">{{goods.marketPrice}}</span>
</div>
<div class="counter">
<div v-if="goods.selectCount > 0" @click="unselectGoods(goods.id)" class="icon">
<svg fill="#2395ff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
<svg viewBox="0 0 44 44" id="cart-add" width="100%" height="100%">
<path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path>
</svg>
</svg>
</div>
<span v-if="goods.selectCount > 0" style="padding: 0px 6px; color: #666">{{ goods.selectCount }}</span>
<div @click.stop="selectGoods(goods.id)" class="icon add">
<svg :fill="goods.selectCount >= goods.surplus ? '#c8c9cc' : '#2395ff'">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
<svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
<path fill="none" d="M0 0h44v44H0z"></path>
<path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
</svg>
</svg>
<div :ref="'add-' + goods.id" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 4px; z-index: 999; ">
<svg :fill="goods.selectCount >= goods.surplus ? '#c8c9cc' : '#2395ff'">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
<svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
<path fill="none" d="M0 0h44v44H0z"></path>
<path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
</svg>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</scroll>
<div ref="cartView" class="cartview" style="z-index: 11;">
<span ref="cart" aria-label="购物车" :attr-quantity="total" class="cart-icon"></span>
<div aria-label="购物车有商品5件,共44元,配送费&amp;yen;3。" class="cart-info">
<p class="cart-info-total">
<span>¥{{totalPrice}}</span>
</p>
<p class="cart-info-desc">已省下¥{{(totalMarketPrice - totalPrice).toFixed(2)}}</p>
</div>
<div class="cart-submit" @click="toPay">去结算</div>
</div>
</div>
</template>
<script>
import Scroll from '@/base/scroll'
import animations from 'create-keyframe-animation'
import { MessageBox, Toast } from 'mint-ui'
import axios from '@/api/axiosApi'
const RESERVED_HEIGHT = 40
export default {
data () {
return {
scrollY: 0,
banner: [],
goodsList: []
}
},
created () {
this.probeType = 3
this.listenScroll = true
},
mounted () {
this.imageHeight = this.$refs.banner.$el.clientHeight
this.$refs.list.$el.style.top = `${this.imageHeight}px`
const openId = localStorage.getItem('openId')
// const dormitoryId = this.$route.query.dormitoryId
const _self = this
if (openId === null) {
MessageBox.confirm('您当前未登录QD校园,是否跳转登录?').then(action => {
localStorage.setItem('backPath', _self.$router.currentRoute.path + '?dormitoryId=' + _self.$router.currentRoute.query.dormitoryId)
_self.$router.push({
path: '/wechat/login'
})
}).catch(() => {})
}
this._getPersonInfo()
this._getBannerList()
// 注册动画
this.registerScalAnimation()
},
computed: {
total () {
let total = 0
this.goodsList.forEach(goods => {
if (goods.selectCount > 0) {
total += goods.selectCount
}
})
return total
},
totalPrice () {
let totalPrice = 0
this.goodsList.forEach(goods => {
if (goods.selectCount > 0) {
totalPrice += goods.selectCount * goods.discount
}
})
return totalPrice.toFixed(2)
},
totalMarketPrice () {
let totalMarketPrice = 0
this.goodsList.forEach(goods => {
if (goods.selectCount > 0) {
totalMarketPrice += goods.selectCount * goods.marketPrice
}
})
return totalMarketPrice.toFixed(2)
}
},
methods: {
_getPersonInfo () {
const openId = localStorage.getItem('openId')
const _self = this
axios.post('/student/findByOpenId', {
openId: openId
}, (data) => {
let URL = document.URL
if (typeof URL.split('?')[1] !== 'undefined') {
if (URL.split('?')[1].indexOf('dormitoryId') === -1) {
// 重置URL
window.history.replaceState({}, 0, document.URL + '&' + 'dormitoryId=' + data.dormitoryId)
}
} else {
window.history.replaceState({}, 0, document.URL + '?' + 'dormitoryId=' + data.dormitoryId)
}
_self.$route.query.dormitoryId = data.dormitoryId
if (data.createBy === 'admin') {
_self.$router.push({
path: '/wechat/snacks/manage',
query: {
dormitoryId: data.dormitoryId
}
})
return
}
_self._getGoodsList()
})
},
_getBannerList () {
axios.get('/snacks/banner', null, (data) => {
this.banner = data
})
},
_getGoodsList () {
const dormitoryId = this.$route.query.dormitoryId
axios.get('/snacks/goods', {
dormitoryId: dormitoryId
}, (data) => {
data.forEach(item => {
item.discount = (item.discount / 100).toFixed(2)
item.marketPrice = (item.marketPrice / 100).toFixed(2)
item.selectCount = 0
})
this.goodsList = data
})
},
scroll (pos) {
this.scrollY = pos.y
},
paoAnimation (id, callback) {
// 加号到顶部的距离
let iconTop = this.$refs.banner.$el.clientHeight + this.$refs['goods-' + id][0].offsetTop + this.$refs['goods-' + id][0].clientHeight - 6
// 商品列表滚动的距离
const scrollTop = this.$refs.list.scroll.wrapperOffset.top - this.$refs.list.scroll.y + RESERVED_HEIGHT
// 向上滚动
if (scrollTop > 0) {
iconTop = iconTop - scrollTop
}
// 加号到左边的距离
const iconLeft = window.innerWidth - this.$refs['add-' + id][0].clientWidth - 12
const x = iconLeft - this.$refs.cart.offsetLeft - this.$refs.cart.clientWidth / 2
const y = window.innerHeight - (this.$refs.cartView.clientHeight - this.$refs.cart.offsetTop - this.$refs.cart.clientHeight / 2) - iconTop + 10
const a = y / (x * x)
let animation = {}
for (let i = 0; i <= 10; i++) {
animation[(i * 10) + '%'] = {transform: `translate(${-i / 10 * x}px, ${(-i / 10 * x) * (-i / 10 * x) * a}px) rotateZ(${360 * (1 - i / 10)}deg)`}
}
animations.registerAnimation({
name: 'move-' + id,
animation,
presets: {
duration: 250,
easing: 'linear',
fillMode: 'forwards',
resetWhenDone: true
}
})
animations.runAnimation(this.$refs['add-' + id][0], 'move-' + id, callback)
},
registerScalAnimation () {
const animation = {
'0%': {transform: `scale(1)`},
'25%': {transform: `scale(1.1)`},
'50%': {transform: `scale(1.2)`},
'75%': {transform: `scale(1.1)`},
'100%': {transform: `scale(1)`}
}
animations.registerAnimation({
name: 'cartScale',
animation,
presets: {
duration: 300,
resetWhenDone: true
}
})
},
unselectGoods (id) {
this.goodsList.forEach(goods => {
if (goods.id === id && goods.selectCount > 0) {
if (goods.iconDisabled) {
return
}
goods.selectCount--
return 0
}
})
},
selectGoods (id) {
this.goodsList.forEach(goods => {
if (goods.id === id && goods.selectCount < goods.surplus) {
if (goods.iconDisabled === true) {
return
}
goods.iconDisabled = true
const _self = this
this.paoAnimation(id, function () {
animations.runAnimation(_self.$refs.cart, 'cartScale')
goods.selectCount++
goods.iconDisabled = false
})
return 0
}
})
},
toPay () {
if (this.totalPrice <= 0) {
if (this.toastInstance) {
this.toastInstance.close()
}
this.toastInstance = Toast('请选择商品')
return
}
const openId = localStorage.getItem('openId')
const _self = this
if (openId === null) {
MessageBox.confirm('您当前未登录QD校园,是否跳转登录?').then(action => {
localStorage.setItem('backPath', _self.$router.currentRoute.path + '?dormitoryId=' + _self.$router.currentRoute.query.dormitoryId)
_self.$router.push({
path: '/wechat/login'
})
}).catch(() => {})
} else {
/* eslint-disable */
let type = ''
let ua = window.navigator.userAgent.toLowerCase()
if (ua.match(/micromessenger/i) == 'micromessenger') {
type = 'weixin'
} else {
type = 'H5'
}
MessageBox.confirm('您当前消费' + _self.totalPrice + '元').then(action => {
axios.post('/snacks/pay', {
openId: openId,
feeTotal: parseInt(_self.totalPrice * 100),
spbillCreateIp: returnCitySN['cip'],
type: type
}, (data) => {
let data1 = data.data
if (type !== 'H5') {
data1.timeStamp = data1.timestamp
if (typeof WeixinJSBridge === 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', _self.onBridgeReady(data1), false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', _self.onBridgeReady(data1))
document.attachEvent('onWeixinJSBridgeReady', _self.onBridgeReady(data1))
}
} else {
_self.onBridgeReady(data1)
}
} else {
window.location.href = data1.mweb_url + '&redirect_url=' + encodeURIComponent('http://www.qdcollege.cn/paySuccess.html?out_trade_no='+ data1.out_trade_no)
}
})
/* eslint-enable */
}).catch(() => { })
}
},
onBridgeReady (data) {
/* eslint-disable */
const _self = this
WeixinJSBridge.invoke('getBrandWCPayRequest', data, (res) => {
// 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
if (res.err_msg == 'get_brand_wcpay_request:ok') {
let urlParams = []
_self.goodsList.forEach(item => {
if (item.selectCount > 0) {
urlParams.push({
id: item.stockId,
surplus: item.selectCount
})
}
})
axios.post('/stock/reduceGoodsNum', {stockslistStr: JSON.stringify(urlParams)}, () => {
_self._getGoodsList()
})
Toast('支付成功')
} else {
Toast('支付失败')
}
})
/* eslint-enable */
}
},
components: {
Scroll
},
watch: {
scrollY (newVal) {
// console.log(newVal)
let scale = 1
const percent = Math.abs(newVal / this.imageHeight)
if (newVal > 0) {
scale = 1 + percent
this.$refs.banner.$el.style.height = `${this.imageHeight * scale}px`
} else {
this.$refs.banner.$el.style.height = `${Math.max(RESERVED_HEIGHT, this.imageHeight + newVal)}px`
}
this.$refs.list.$el.style.top = this.$refs.banner.$el.style.height + 'px'
this.$refs.banner.$el.style.zIndex = 10
// this.$refs.banner.$el.style[transform] = `scale(${scale})`
}
}
}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';
.snacks-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
.banner {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 10;
}
.list {
position: fixed;
top: 0;
bottom: 48px;
width: 100%;
}
.goods-wrapper {
.goods {
display: flex;
min-height: 85px;
margin-bottom: 6px;
padding: 6px 12px;
border-bottom: 1px solid #eee;
.thumb {
width: 20.266667vw;
height: 20.266667vw;
margin-right: 3%;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.content {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-bottom: 30px;
h1 {
font-size: $font-size-medium-x;
font-weight: bolder;
}
.desc {
font-size: $font-size-medium;
color: #666;
font-weight: 400;
margin: 10px 0 !important;
display: flex;
justify-content: space-between;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-between;
.discount {
font-size: $font-size-medium-x;
color: $color-theme;
font-weight: bolder;
}
.marketPrice {
font-size: $font-size-small;
color: #666;
text-decoration: line-through;
}
.counter {
display: flex;
justify-content: center;
color: #2395ff;
line-height: 30px;
min-width: 65px;
.icon {
position: relative;
display: inline-block;
width: 22px;
height: 22px;
padding: 4px;
vertical-align: middle;
svg {
width: 22px;
height: 22px;
}
}
span {
font-size: 16px;
}
}
}
}
}
}
.cartview {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-left: 2.106667rem;
padding-left: 21.066667vw;
background-color: rgba(61, 61, 63, 0.9);
-webkit-backdrop-filter: blur(0.266667rem);
-webkit-backdrop-filter: blur(2.666667vw);
height: 1.28rem;
height: 12.8vw;
.cart-icon {
position: absolute;
left: 0.32rem;
left: 3.2vw;
bottom: 0.2rem;
bottom: 2vw;
width: 1.333333rem;
width: 13.333333vw;
height: 1.333333rem;
height: 13.333333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 100%;
background-color: #3190e8;
border: 0.133333rem solid #444;
border: 1.333333vw solid #444;
-webkit-box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0, 0, 0, 0.1);
will-change: transform;
&:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTggNTgiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIHg9Ii01MCUiIHk9Ii01MCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIiBzdGREZXZpYXRpb249IjEuNSIvPjxmZUNvbG9yTWF0cml4IGluPSJzaGFkb3dCbHVyT3V0ZXIxIiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA4IDAiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48cGF0aCBpZD0iYiIgZD0iTTcuNjE0IDQuMDUxYy0xLjA2Ni4wODYtMS40NTItLjM5OC0xLjc1Mi0xLjU4NEM1LjU2MiAxLjI4LjMzIDUuODguMzMgNS44OGwzLjcxIDE5LjQ3NmMwIC4xNDgtMS41NiA3LjUxNS0xLjU2IDcuNTE1LS40ODkgMi4xOS4yOTIgNC4yNyAzLjU2IDQuMzIgMCAwIDM2LjkxNy4wMTcgMzYuOTIuMDQ3IDEuOTc5LS4wMTIgMi45ODEtLjk5NSAzLjAxMy0zLjAzOS4wMy0yLjA0My0xLjA0NS0yLjk3OC0yLjk4Ny0yLjk5M0w4LjgzIDMxLjE5MnMuODYtMy44NjUgMS4wNzctMy44NjVjMCAwLTUuNzg4LjEyMiAzMi4wNjUtMS45NTYuNjA2LS4wMzMgMi4wMTgtLjc2NCAyLjI5OC0xLjg0OCAxLjExMy00LjMxNyA0LjAwOC0xMy4yNiA0LjQ1OC0xNS42NC45MzItNC45MjUgMi4wNjEtOC41NTgtNC4yOC03LjQwNSAwIDAtMzUuNzY4IDMuNDg3LTM2LjgzMyAzLjU3M3oiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWx0ZXI9InVybCgjYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMikiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDM4IDcuODA4KSI+PG1hc2sgaWQ9ImMiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2IiLz48L21hc2s+PHVzZSBmaWxsPSIjRkZGIiB4bGluazpocmVmPSIjYiIvPjxwYXRoIGZpbGw9IiMyMDczQzEiIGQ9Ik01My45NjIgNy43NzRsLTUuNzAxIDE5LjMwNS00MC43OCAxLjU3NHoiIG1hc2s9InVybCgjYykiIG9wYWNpdHk9Ii4xIi8+PC9nPjxwYXRoIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjYiIGQ9Ik05LjM3NCAxOC43MjJTNy44NjggMTEuMjgzIDcuMzIzIDguNzFDNi43NzggNi4xMzYgNS44NiA1LjMzIDMuOTc4IDQuNTIgMi4wOTYgMy43MTMuMzY3IDIuMjg2LjM2NyAyLjI4NiIvPjxjaXJjbGUgY3g9IjQ2IiBjeT0iNTEiIHI9IjQiIGZpbGw9IiNGRkYiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjUxIiByPSI0IiBmaWxsPSIjRkZGIi8+PC9nPjwvc3ZnPg==') 50% no-repeat;
background-size: 0.6rem;
background-size: 6vw;
content: '';
}
&:after {
position: absolute;
right: -1.2vw;
top: -1.333333vw;
line-height: 1;
background-image: -webkit-gradient(linear, right top, left top, from(#ff7416), color-stop(98%, #ff3c15));
background-image: -webkit-linear-gradient(right, #ff7416, #ff3c15 98%);
background-image: linear-gradient(-90deg, #ff7416, #ff3c15 98%);
color: #fff;
border-radius: 3.2vw;
padding: 0.053333rem 0.133333rem;
padding: 0.533333vw 1.333333vw;
content: attr(attr-quantity);
font-size: 13px;
}
}
.cart-info {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
.cart-info-total {
font-size: $font-size-large;
line-height: normal;
color: #fff;
}
.cart-info-desc {
font-size: $font-size-small;
color: #999;
}
}
.cart-submit {
height: 100%;
width: 28vw;
background-color: #4cd964;
color: #fff;
text-align: center;
text-decoration: none;
font-size: $font-size-large-x;
font-weight: 700;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.28rem;
line-height: 12.8vw;
}
}
}
</style>

评论 ( 0 )

你可以在登录后,发表评论

11_float_left_people 11_float_left_close