|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view class='app-container'>
|
|
|
+ <view class='app-container' flex column>
|
|
|
<view class="header">
|
|
|
<view class="info" flex>
|
|
|
<view class="dev-img" flex center>
|
|
|
@@ -20,10 +20,9 @@
|
|
|
</view>
|
|
|
<view class="main">
|
|
|
<view class="title">流量选择</view>
|
|
|
- <view flex between>
|
|
|
- <view :class="['list', active === index ? 'active' : '']"
|
|
|
- :style="{ 'width': `calc(${100 / options.length}% - 5px)` }" v-for="(item, index) in options" :key="index"
|
|
|
- flex column between @click="getActive(item, index)" :data-content-before="item.operators"
|
|
|
+ <view flex wrap>
|
|
|
+ <view :class="['list', active === index ? 'active' : '']" v-for="(item, index) in options" :key="index" flex
|
|
|
+ column between @click="getActive(item, index)" :data-content-before="item.operators"
|
|
|
:data-content-after="item.tagName">
|
|
|
<view class="flow">{{ item.name }}</view>
|
|
|
<view class="discount icon">{{ item.goodDiscountedPrice }}</view>
|
|
|
@@ -217,20 +216,23 @@ export default {
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
+ flex: 1;
|
|
|
padding: 0 32rpx;
|
|
|
+ margin-bottom: 320rpx;
|
|
|
|
|
|
.active {
|
|
|
background-color: rgba(199, 170, 134, 0.12);
|
|
|
}
|
|
|
|
|
|
.list {
|
|
|
+ width: calc(100% / 3 - 10px);
|
|
|
height: 268rpx;
|
|
|
border: 1px solid #C7AA86;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 48rpx 0;
|
|
|
color: #FFD5A0;
|
|
|
position: relative;
|
|
|
- margin: 24rpx 0;
|
|
|
+ margin: 24rpx 5px 0;
|
|
|
|
|
|
.flow {
|
|
|
font-size: 32rpx;
|
|
|
@@ -280,6 +282,7 @@ export default {
|
|
|
.explain {
|
|
|
font-size: 24rpx;
|
|
|
opacity: 0.5;
|
|
|
+ margin-top: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
