|
@@ -1,12 +1,144 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="page"> |
|
|
<div class="page"> |
|
|
<div class="commoditylIst"> |
|
|
<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> |
|
|
</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> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script setup> |
|
|
<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> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
@@ -16,5 +148,130 @@ let title = ref(""); |
|
|
padding: 20px 0 0 20px; |
|
|
padding: 20px 0 0 20px; |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
border-radius: 25px 0 0; |
|
|
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> |
|
|
</style> |