Jelajahi Sumber

可用优惠卷页面

lilei 4 tahun lalu
induk
melakukan
7c7baed793

+ 1 - 1
public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>logo.png">
-    <title>智快洗发卷中心</title>
+    <title>智快洗发卷中心</title>
     <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
     <!-- require cdn assets css -->
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>

+ 1 - 1
src/utils/domUtil.js

@@ -16,4 +16,4 @@ export const setDocumentTitle = function (title) {
   }
 }
 
-export const domTitle = '智快洗发卷中心'
+export const domTitle = '智快洗发卷中心'

+ 44 - 72
src/views/AvailableCoupon/AvailableCoupon.vue

@@ -1,33 +1,19 @@
 <template>
-  <!-- <a-card class="card-content">
-    <div class="AvailableCoupon-content">
-      <div class="coupon-type">
-        <div class="arc-left"></div>
-        <div class="arc-right"></div>
+  <div class="card-content">
+    <div class="card-item" v-for="item in 10">
+      <div class="card-item-head">
+        <div>满200减50</div>
+        <div>满减卷</div>
       </div>
-      <div class="coupon-content">
-        <div class="arc-top"></div>
-        <div class="arc-bottom"></div>
+      <div class="card-item-middle">
+        <div>满200减50卷</div>
+        <div>有效期:2020-05-28 至 2020-12-05</div>
+      </div>
+      <div class="card-item-button">
+        <a-button size="large" ghost type="danger">生成领取吗</a-button>
       </div>
     </div>
-  </a-card> -->
-  <a-card hoverable style="width: 240px">
-      <!-- <img
-        slot="cover"
-        alt="example"
-        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
-      /> -->
-      <a-card-meta title="Europe Street beat">
-        <template slot="description">
-          www.instagram.com
-        </template>
-      </a-card-meta>
-      <a-card-meta title="Europe Street beat">
-        <template slot="description">
-          www.instagram.com
-        </template>
-      </a-card-meta>
-    </a-card>
+  </div>
 </template>
 
 <script>
@@ -35,54 +21,40 @@
 
 <style lang="less">
   .card-content{
-    height:100vh;
-    padding: 20px;
-    background-color: #fff;
-    .coupon-type{
-      width:200px;
-      height:100px;
-      background-color: red;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border-radius:10px 10px 0 0;
-      .arc-left{
-        width: 15px;
-        height: 15px;
-        background-color: #fff;
-        /*四分之一圆*/
-        border-radius: 0 100% 0  0;
-        /*定位*/
-        position: absolute;
-        left: 0;
-        bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .card-item{
+      width: 21%;
+      background: #FFFFFF;
+      border-radius: 5px;
+      box-shadow: 1px 2px 5px #999;
+      overflow: hidden;
+      margin: 2%;
+      > div{
+        padding: 15px;
+        text-align: center;
+        &:first-child{
+          padding-bottom: 5px;
+        }
       }
-      .arc-right{
-        width: 15px;
-        height: 15px;
-        background-color: #fff;
-        /*四分之一圆*/
-        border-radius: 100%  0 0  0;
-        /*定位*/
-        position: absolute;
-        right: 0;
-        bottom: 0;
+      .card-item-head{
+        background: #F5222D;
+        color: #fff;
+        > div{
+          &:first-child{
+            font-size: 32px;
+          }
+        }
+      }
+      .card-item-middle{
+        padding-bottom: 0;
+        > div{
+          &:first-child{
+            font-size: 18px;
+          }
+        }
       }
-    }
-    .coupon-content{
-      width:200px;
-      height:100px;
-      background-color: #fff;
-      border:1px soild #FF0000;
-      border-radius:0 0 10px 10px;
-      position: absolute;
-      top: 100px;
-      bottom: 0;
-      left: 200px;
-      right: 0;
     }
   }
-   
 </style>

+ 1 - 1
src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <a-alert message="欢迎登录智快洗发卷中心系统" type="info" showIcon />
+    <a-alert message="欢迎登录智快洗发卷中心系统" type="info" showIcon />
   </div>
 </template>