Ver a proveniência

商店页

dev_YWQ
congzc há 1 ano
ascendente
cometimento
ac9f45b45d
2 ficheiros alterados com 260 adições e 3 eliminações
  1. +1
    -1
      src/layout/components/TagsView/index.vue
  2. +259
    -2
      src/views/myStore/index.vue

+ 1
- 1
src/layout/components/TagsView/index.vue Ver ficheiro

@@ -242,7 +242,7 @@ onMounted(() => {
</script>

<template>
<div class="tags-container">
<div class="tags-container" v-if="false">
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
<router-link
:class="'tags-item ' + (isActive(tag) ? 'active' : '')"


+ 259
- 2
src/views/myStore/index.vue Ver ficheiro

@@ -1,12 +1,144 @@
<template>
<div class="page">
<div class="commoditylIst">
<div class="item"></div>
<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>
<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>
</div>
</div>
</div>
</div>

<!-- 对话框 -->
<el-dialog v-model="showPayDialog" width="60%" center>
<div class="payDialog">
<div class="left">
<div class="title">{{ presentItme.value.title }}</div>
<div class="price">
<span>{{ presentItme.value.price }}</span>
元/{{ presentItme.value.priceTime }}
</div>
<div
class="authority"
v-for="item in presentItme.value.authority"
:key="item"
>
{{ item }}
</div>
</div>
<div class="right">
<div style="background-color: #07c160">微信支付</div>
<div style="background-color: #1378fe">支付宝支付</div>
<div style="background-color: #0070ba">Paypal</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
let title = ref("");
const title = ref("");
const list = reactive([
{
color: "#f3af00",
title: "基础款",
icon: "",
price: "0",
priceTime: "14天",
time: "5",
authority: [
"D-ID 水印",
"高级和标准演示器",
"15 个 AI 演示提示",
"AI 脚本世代",
],
},
{
color: "#c971ff",
title: "升级款",
icon: "",
price: "10",
priceTime: "30天",
time: "10",
authority: [
"D-ID 水印",
"高级和标准演示器",
"15 个 AI 演示提示",
"AI 脚本世代",
"API访问",
],
},
{
color: "#7b61ff",
title: "豪华款",
icon: "",
price: "20",
priceTime: "30天",
time: "15",
authority: [
"D-ID 水印",
"高级和标准演示器",
"15 个 AI 演示提示",
"AI 脚本世代",
"API访问",
"商业用途",
],
},
{
color: "#000",
title: "探索款",
icon: "",
price: "50",
priceTime: "30天",
time: "40",
authority: [
"D-ID 水印",
"高级和标准演示器",
"15 个 AI 演示提示",
"AI 脚本世代",
"API访问",
"商业用途",
"PowerPoint 插件",
],
},
]);

const showPayDialog = ref(false);
const presentItme = reactive({});
function clickPayDialog(item) {
presentItme.value = item;
console.log(presentItme);
showPayDialog.value = true;
}
</script>

<style lang="scss" scoped>
@@ -16,5 +148,130 @@ let title = ref("");
padding: 20px 0 0 20px;
background-color: #fff;
border-radius: 25px 0 0;
padding: 20px;
}
.commoditylIst {
display: flex;
justify-content: flex-start;
// overflow-x: auto;
padding: 20px 20px 20px 0;
width: 100%;
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;
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 {
font-size: 30px;
font-weight: 700;
color: #242625;
}
}
.time {
margin-bottom: 30px;
font-size: 20px;
color: #7c7c7a;
span {
font-weight: 700;
color: #242625;
}
}
.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;
}
}
}
}
}
.commodityList::-webkit-scrollbar {
display: none; /* 隐藏滚动条(Safari、Chrome) */
}
.payDialog {
display: flex;
.left {
width: 350px;
border-right: 1px solid #7c7c7a;
.title {
color: #242625;
font-weight: 700;
font-size: 30px;
text-align: center;
}
.price {
span {
font-size: 30px;
font-weight: 700;
color: #242625;
}
}
.authority {
padding: 10px 20px;
}
}
.right {
padding: 100px 300px;
div {
width: 200px;
height: 40px;
border: 1px solid #242625;
border-radius: 10px;
text-align: center;
line-height: 40px;
margin: 30px;
color: #fff;
}
}
}
</style>

Carregando…
Cancelar
Guardar