Ver a proveniência

过渡

dev_YWQ
HolyKnightIX há 1 ano
ascendente
cometimento
0cce9c076d
2 ficheiros alterados com 115 adições e 97 eliminações
  1. +0
    -3
      src/types/components.d.ts
  2. +115
    -94
      src/views/myStore/index.vue

+ 0
- 3
src/types/components.d.ts Ver ficheiro

@@ -20,13 +20,10 @@ declare module '@vue/runtime-core' {
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import("element-plus/es")["ElMenu"]
ElMenuItem: typeof import("element-plus/es")["ElMenuItem"]
ElOption: typeof import('element-plus/es')['ElOption']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSubMenu: typeof import("element-plus/es")["ElSubMenu"]
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']


+ 115
- 94
src/views/myStore/index.vue Ver ficheiro

@@ -2,37 +2,37 @@
<div class="page">
<div class="commoditylIst">
<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 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>
@@ -159,82 +159,103 @@ function clickPayDialog(item) {
height: 100%;
// scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
// -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;
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-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;
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 {
display: none; /* 隐藏滚动条(Safari、Chrome) */
}


Carregando…
Cancelar
Guardar