From 0cce9c076df4467eb6a01a5a79bf0f341c0ffcec Mon Sep 17 00:00:00 2001 From: YWQ HK IX <568170040@qq.com> Date: Tue, 23 May 2023 21:16:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=87=E6=B8=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/components.d.ts | 3 - src/views/myStore/index.vue | 209 ++++++++++++++++++++---------------- 2 files changed, 115 insertions(+), 97 deletions(-) diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 433d75f..d67af9e 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -20,13 +20,10 @@ declare module '@vue/runtime-core' { ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] - ElMenu: typeof import("element-plus/es")["ElMenu"] - ElMenuItem: typeof import("element-plus/es")["ElMenuItem"] ElOption: typeof import('element-plus/es')['ElOption'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] - ElSubMenu: typeof import("element-plus/es")["ElSubMenu"] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index 7509f3d..9335574 100644 --- a/src/views/myStore/index.vue +++ b/src/views/myStore/index.vue @@ -2,37 +2,37 @@
-
-
- -
-
- - {{ item.title }} +
+
+
+ +
+
+ + {{ item.title }} +
+
+ {{ item.price }}元/{{ + item.priceTime + }} +
+
+ {{ item.time }}分钟/月 +
+
+ 选择方案 +
-
- {{ item.price }}元/{{ item.priceTime }} -
-
- {{ item.time }}分钟/月 -
-
- 选择方案 -
-
- -
-
- {{ items }} + +
+
+ {{ items }} +
@@ -159,82 +159,103 @@ function clickPayDialog(item) { 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; + .item { + width: 350px; + height: 100%; + margin-left: 50px; + background-color: #fffefd; + flex-shrink: 0; /* 防止缩小宽度 */ + border: 1px solid #c0bfbd; + border-radius: 20px; + overflow: hidden; + transition: all 0.3s; + cursor: pointer; + .line { + height: 20px; + background-color: pink; + cursor: pointer; + } + .info { 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 { + cursor: pointer; + .content { + height: 300px; + padding: 20px; + border-bottom: 1px solid #c0bfbd; + cursor: pointer; + .title { font-size: 30px; font-weight: 700; - color: #242625; + line-height: 25px; + margin-bottom: 30px; + cursor: pointer; + .el-icon { + line-height: 30px; + width: 40px; + height: 40px; + font-size: 40px; + color: #000; + text-align: center; + vertical-align: sub; + cursor: pointer; + } } - } - .time { - margin-bottom: 30px; - font-size: 20px; - color: #7c7c7a; - span { + .money { + margin-bottom: 30px; + font-size: 20px; + color: #7c7c7a; + cursor: pointer; + .price { + font-size: 30px; + font-weight: 700; + color: #242625; + cursor: pointer; + } + } + .time { + margin-bottom: 30px; + font-size: 20px; + color: #7c7c7a; + cursor: pointer; + span { + font-weight: 700; + color: #242625; + cursor: pointer; + } + } + .button { + width: 100%; + height: 40px; + border-radius: 10px; + text-align: center; + line-height: 40px; + color: #fff; font-weight: 700; - color: #242625; + background-color: yellow; + cursor: pointer; } } - .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; + .authority { + cursor: pointer; + &-item { + cursor: pointer; + padding: 20px 10px; + span { + cursor: pointer; + color: #7c7c7a; + margin-right: 30px; + } } } } + &:hover { + cursor: pointer; + transform: translateY(-20px); + box-shadow: #00000026 2px 2px 2px 2px; + } } } + .commodityList::-webkit-scrollbar { display: none; /* 隐藏滚动条(Safari、Chrome) */ }