|
@@ -2,37 +2,37 @@ |
|
|
<div class="page"> |
|
|
<div class="page"> |
|
|
<div class="commoditylIst"> |
|
|
<div class="commoditylIst"> |
|
|
<div class="item" v-for="item in list" :key="item.title"> |
|
|
<div class="item" v-for="item in list" :key="item.title"> |
|
|
<div class="line" :style="`background-color:${item.color} ;`"></div> |
|
|
|
|
|
<div class="info"> |
|
|
|
|
|
<!-- 商品信息 --> |
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
<div class="title"> |
|
|
|
|
|
<el-icon><i-ep-edit /></el-icon> |
|
|
|
|
|
{{ item.title }} |
|
|
|
|
|
|
|
|
<div @click="clickPayDialog(item)"> |
|
|
|
|
|
<div class="line" :style="`background-color:${item.color} ;`"></div> |
|
|
|
|
|
<div class="info"> |
|
|
|
|
|
<!-- 商品信息 --> |
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
<div class="title"> |
|
|
|
|
|
<el-icon><i-ep-edit /></el-icon> |
|
|
|
|
|
{{ item.title }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="money"> |
|
|
|
|
|
<span class="price">{{ item.price }}元</span>/{{ |
|
|
|
|
|
item.priceTime |
|
|
|
|
|
}} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="time"> |
|
|
|
|
|
<span>{{ item.time }}</span |
|
|
|
|
|
>分钟/月 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="button" :style="`background-color:${item.color} ;`"> |
|
|
|
|
|
选择方案 |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="money"> |
|
|
|
|
|
<span class="price">{{ item.price }}元</span>/{{ item.priceTime }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="time"> |
|
|
|
|
|
<span>{{ item.time }}</span |
|
|
|
|
|
>分钟/月 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
@click="clickPayDialog(item)" |
|
|
|
|
|
class="button" |
|
|
|
|
|
:style="`background-color:${item.color} ;`" |
|
|
|
|
|
> |
|
|
|
|
|
选择方案 |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 商品权益 --> |
|
|
|
|
|
<div class="authority"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="authority-item" |
|
|
|
|
|
v-for="items in item.authority" |
|
|
|
|
|
:key="items" |
|
|
|
|
|
> |
|
|
|
|
|
<span>✔</span>{{ items }} |
|
|
|
|
|
|
|
|
<!-- 商品权益 --> |
|
|
|
|
|
<div class="authority"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="authority-item" |
|
|
|
|
|
v-for="items in item.authority" |
|
|
|
|
|
:key="items" |
|
|
|
|
|
> |
|
|
|
|
|
<span>✔</span>{{ items }} |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -159,82 +159,103 @@ function clickPayDialog(item) { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
// scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ |
|
|
// scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ |
|
|
// -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ |
|
|
// -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ |
|
|
} |
|
|
|
|
|
.item { |
|
|
|
|
|
width: 350px; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
margin-left: 50px; |
|
|
|
|
|
background-color: #fffefd; |
|
|
|
|
|
flex-shrink: 0; /* 防止缩小宽度 */ |
|
|
|
|
|
border: 1px solid #c0bfbd; |
|
|
|
|
|
border-radius: 20px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
.line { |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
background-color: pink; |
|
|
|
|
|
} |
|
|
|
|
|
.info { |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
.content { |
|
|
|
|
|
height: 300px; |
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
|
width: 350px; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
margin-left: 50px; |
|
|
|
|
|
background-color: #fffefd; |
|
|
|
|
|
flex-shrink: 0; /* 防止缩小宽度 */ |
|
|
|
|
|
border: 1px solid #c0bfbd; |
|
|
|
|
|
border-radius: 20px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
.line { |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
background-color: pink; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
.info { |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
|
border-bottom: 1px solid #c0bfbd; |
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 30px; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
line-height: 25px; |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
.el-icon { |
|
|
|
|
|
line-height: 30px; |
|
|
|
|
|
width: 40px; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
font-size: 40px; |
|
|
|
|
|
color: #000; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
vertical-align: sub; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.money { |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
color: #7c7c7a; |
|
|
|
|
|
.price { |
|
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
.content { |
|
|
|
|
|
height: 300px; |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
border-bottom: 1px solid #c0bfbd; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
.title { |
|
|
font-size: 30px; |
|
|
font-size: 30px; |
|
|
font-weight: 700; |
|
|
font-weight: 700; |
|
|
color: #242625; |
|
|
|
|
|
|
|
|
line-height: 25px; |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
.el-icon { |
|
|
|
|
|
line-height: 30px; |
|
|
|
|
|
width: 40px; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
font-size: 40px; |
|
|
|
|
|
color: #000; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
vertical-align: sub; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.time { |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
color: #7c7c7a; |
|
|
|
|
|
span { |
|
|
|
|
|
|
|
|
.money { |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
color: #7c7c7a; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
.price { |
|
|
|
|
|
font-size: 30px; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
color: #242625; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.time { |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
color: #7c7c7a; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
span { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
color: #242625; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.button { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
color: #fff; |
|
|
font-weight: 700; |
|
|
font-weight: 700; |
|
|
color: #242625; |
|
|
|
|
|
|
|
|
background-color: yellow; |
|
|
|
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.button { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
background-color: yellow; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.authority { |
|
|
|
|
|
&-item { |
|
|
|
|
|
padding: 20px 10px; |
|
|
|
|
|
span { |
|
|
|
|
|
color: #7c7c7a; |
|
|
|
|
|
margin-right: 30px; |
|
|
|
|
|
|
|
|
.authority { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
&-item { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
padding: 20px 10px; |
|
|
|
|
|
span { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
color: #7c7c7a; |
|
|
|
|
|
margin-right: 30px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
&:hover { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transform: translateY(-20px); |
|
|
|
|
|
box-shadow: #00000026 2px 2px 2px 2px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.commodityList::-webkit-scrollbar { |
|
|
.commodityList::-webkit-scrollbar { |
|
|
display: none; /* 隐藏滚动条(Safari、Chrome) */ |
|
|
display: none; /* 隐藏滚动条(Safari、Chrome) */ |
|
|
} |
|
|
} |
|
|