| @@ -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> | ||||