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