邃芒慧语、照片说话(PC) https://photo.metavatar.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

385 rivejä
8.8 KiB

  1. <template>
  2. <div class="page">
  3. <div class="commoditylIst">
  4. <div class="item" v-for="item in list" :key="item.title">
  5. <div @click="clickPayDialog(item)">
  6. <div class="line" :style="`background-color:${item.color} ;`"></div>
  7. <div class="info">
  8. <!-- 商品信息 -->
  9. <div class="content">
  10. <div class="title">
  11. <el-icon><i-ep-edit /></el-icon>
  12. {{ $t(item.title) }}
  13. </div>
  14. <div class="money">
  15. <span class="price">{{ item.price }}元</span>/{{
  16. item.priceTime
  17. }}
  18. </div>
  19. <div class="time">
  20. <span>{{ item.time }}</span
  21. >分钟/月
  22. </div>
  23. <div class="button" :style="`background-color:${item.color} ;`">
  24. {{ $t("shop.selectPlan") }}
  25. </div>
  26. </div>
  27. <!-- 商品权益 -->
  28. <div class="authority">
  29. <div
  30. class="authority-item"
  31. v-for="items in item.authority"
  32. :key="items"
  33. >
  34. <span>✔</span>{{ items }}
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. <!-- 对话框 -->
  42. <el-dialog v-model="showPayDialog" width="60%" center>
  43. <div class="payDialog">
  44. <div class="left">
  45. <div class="title">{{ $t(presentItme.value.title) }}</div>
  46. <div class="price">
  47. <span>{{ presentItme.value.price }}</span>
  48. 元/{{ presentItme.value.priceTime }}
  49. </div>
  50. <div
  51. class="authority"
  52. v-for="item in presentItme.value.authority"
  53. :key="item"
  54. >
  55. {{ item }}
  56. </div>
  57. </div>
  58. <div class="right">
  59. <div
  60. style="background-color: #07c160; cursor: pointer"
  61. @click="showOrderCode(1)"
  62. >
  63. {{ $t("shop.WeChatPay") }}
  64. </div>
  65. <div
  66. style="background-color: #1378fe; cursor: pointer"
  67. @click="showOrderCode(2)"
  68. >
  69. {{ $t("shop.Alipay") }}
  70. </div>
  71. <div
  72. style="background-color: #0070ba; cursor: pointer"
  73. @click="showOrderCode(3)"
  74. >
  75. Paypal
  76. </div>
  77. </div>
  78. </div>
  79. <!-- 二维码弹出框 -->
  80. <el-dialog
  81. v-model="orderCodeDialogShow"
  82. width="30%"
  83. append-to-body
  84. destroy-on-close
  85. >
  86. <div class="orderCodeDialog">
  87. <div class="codeImg">
  88. <img src="../../assets/img/false1.png" alt="" />
  89. </div>
  90. <div class="tips">扫描二维码进行付款</div>
  91. <div class="btnBox">
  92. <div>刷新二维码</div>
  93. </div>
  94. </div>
  95. </el-dialog>
  96. </el-dialog>
  97. </div>
  98. </template>
  99. <script setup>
  100. const title = ref("");
  101. //#region 各个套餐的逻辑
  102. const list = reactive([
  103. {
  104. color: "#f3af00",
  105. title: "shop.Lite",
  106. icon: "",
  107. price: "0",
  108. priceTime: "14天",
  109. time: "5",
  110. authority: [
  111. "Metavatar 水印",
  112. "高级和标准演示器",
  113. "15 个 AI 演示提示",
  114. "AI 脚本世代",
  115. ],
  116. },
  117. {
  118. color: "#c971ff",
  119. title: "shop.Pro",
  120. icon: "",
  121. price: "10",
  122. priceTime: "30天",
  123. time: "10",
  124. authority: [
  125. "Metavatar 水印",
  126. "高级和标准演示器",
  127. "15 个 AI 演示提示",
  128. "AI 脚本世代",
  129. "API访问",
  130. ],
  131. },
  132. {
  133. color: "#7b61ff",
  134. title: "shop.Adv",
  135. icon: "",
  136. price: "20",
  137. priceTime: "30天",
  138. time: "15",
  139. authority: [
  140. "Metavatar 水印",
  141. "高级和标准演示器",
  142. "15 个 AI 演示提示",
  143. "AI 脚本世代",
  144. "API访问",
  145. "商业用途",
  146. ],
  147. },
  148. {
  149. color: "#000",
  150. title: "shop.Ent",
  151. icon: "",
  152. price: "50",
  153. priceTime: "30天",
  154. time: "40",
  155. authority: [
  156. "Metavatar 水印",
  157. "高级和标准演示器",
  158. "15 个 AI 演示提示",
  159. "AI 脚本世代",
  160. "API访问",
  161. "商业用途",
  162. "PowerPoint 插件",
  163. ],
  164. },
  165. ]);
  166. const showPayDialog = ref(false); //套餐信息dialog显示隐藏
  167. const presentItme = reactive({}); //点击的套餐项
  168. function clickPayDialog(item) {
  169. presentItme.value = item;
  170. console.log(presentItme);
  171. showPayDialog.value = true;
  172. }
  173. function showOrderCode(type) {
  174. orderCodeDialogShow.value = true;
  175. }
  176. //#endregion ------------------------------------
  177. //#region 点击套餐内的支付
  178. const orderCodeDialogShow = ref(false);
  179. //#endregion ------------------------------------
  180. //#region
  181. //#endregion ------------------------------------
  182. </script>
  183. <style lang="scss" scoped>
  184. .page {
  185. min-width: calc(100vw - 210px);
  186. height: calc(100vh - 80px);
  187. padding: 20px 20px 0 20px;
  188. background-color: #fff;
  189. border-radius: 25px 0 0;
  190. padding: 20px;
  191. }
  192. .commoditylIst {
  193. display: flex;
  194. justify-content: flex-start;
  195. // overflow-x: auto;
  196. padding: 20px 20px 20px 50px;
  197. // width: 100%;
  198. // height: 75%;
  199. overflow: hidden;
  200. overflow-x: scroll;
  201. // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
  202. // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
  203. // &::-webkit-scrollbar {
  204. // display: none; /* 隐藏滚动条(Safari、Chrome) */
  205. // }
  206. .item {
  207. width: 350px;
  208. height: 780px;
  209. margin-right: 50px;
  210. background-color: #fffefd;
  211. flex-shrink: 0; /* 防止缩小宽度 */
  212. border: 1px solid #c0bfbd;
  213. border-radius: 20px;
  214. overflow: hidden;
  215. transition: all 0.2s;
  216. cursor: pointer;
  217. .line {
  218. height: 20px;
  219. background-color: pink;
  220. cursor: pointer;
  221. }
  222. .info {
  223. padding: 20px;
  224. cursor: pointer;
  225. .content {
  226. height: 300px;
  227. padding: 20px;
  228. border-bottom: 1px solid #c0bfbd;
  229. cursor: pointer;
  230. .title {
  231. font-size: 30px;
  232. font-weight: 700;
  233. line-height: 25px;
  234. margin-bottom: 30px;
  235. cursor: pointer;
  236. .el-icon {
  237. line-height: 30px;
  238. width: 40px;
  239. height: 40px;
  240. font-size: 40px;
  241. color: #000;
  242. text-align: center;
  243. vertical-align: sub;
  244. cursor: pointer;
  245. }
  246. }
  247. .money {
  248. margin-bottom: 30px;
  249. font-size: 20px;
  250. color: #7c7c7a;
  251. cursor: pointer;
  252. .price {
  253. font-size: 30px;
  254. font-weight: 700;
  255. color: #242625;
  256. cursor: pointer;
  257. }
  258. }
  259. .time {
  260. margin-bottom: 30px;
  261. font-size: 20px;
  262. color: #7c7c7a;
  263. cursor: pointer;
  264. span {
  265. font-weight: 700;
  266. color: #242625;
  267. cursor: pointer;
  268. }
  269. }
  270. .button {
  271. width: 100%;
  272. height: 40px;
  273. border-radius: 10px;
  274. text-align: center;
  275. line-height: 40px;
  276. color: #fff;
  277. font-weight: 700;
  278. background-color: yellow;
  279. cursor: pointer;
  280. }
  281. }
  282. .authority {
  283. cursor: pointer;
  284. &-item {
  285. cursor: pointer;
  286. padding: 20px 10px;
  287. span {
  288. cursor: pointer;
  289. color: #7c7c7a;
  290. margin-right: 30px;
  291. }
  292. }
  293. }
  294. }
  295. &:hover {
  296. cursor: pointer;
  297. transform: translateY(-20px);
  298. box-shadow: #00000026 2px 2px 2px 2px;
  299. }
  300. }
  301. }
  302. .payDialog {
  303. display: flex;
  304. position: relative;
  305. min-height: 500px;
  306. .left {
  307. width: 35%;
  308. border-right: 1px solid #7c7c7a;
  309. .title {
  310. color: #242625;
  311. font-weight: 700;
  312. font-size: 30px;
  313. text-align: center;
  314. }
  315. .price {
  316. span {
  317. font-size: 30px;
  318. font-weight: 700;
  319. color: #242625;
  320. }
  321. }
  322. .authority {
  323. padding: 10px 20px;
  324. }
  325. }
  326. .right {
  327. width: 65%;
  328. position: absolute;
  329. top: 20%;
  330. right: 0%;
  331. padding-left: 20%;
  332. > div {
  333. width: 200px;
  334. height: 40px;
  335. // border: 1px solid #242625;
  336. border-radius: 10px;
  337. text-align: center;
  338. line-height: 40px;
  339. margin: 30px;
  340. color: #fff;
  341. }
  342. }
  343. }
  344. .orderCodeDialog {
  345. width: 100%;
  346. .codeImg {
  347. display: flex;
  348. justify-content: space-evenly;
  349. img {
  350. width: 300px;
  351. height: 300px;
  352. }
  353. }
  354. .tips {
  355. padding-top: 10px;
  356. text-align: center;
  357. }
  358. .btnBox {
  359. padding: 15px 40px;
  360. display: flex;
  361. justify-content: space-evenly;
  362. > div {
  363. padding: 10px 20px;
  364. color: #000;
  365. background-color: #fff;
  366. border: #000 solid 1px;
  367. border-radius: 10px;
  368. transition: all 0.3s;
  369. cursor: pointer;
  370. &:hover {
  371. color: #fff;
  372. background-color: #000;
  373. }
  374. }
  375. }
  376. }
  377. </style>