天府星

src/project/tianfuxing/AppMy/Merchants.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="merchants">
+    <div class="top">
+      <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png" />
+      <div class="right">
+        <h2>商户名称名称名称</h2>
+        <p>成都市金牛区xxxx大厦成都成都成都成都市金牛区xxxx大厦成都成都成都成…</p>
+      </div>
+    </div>
+    <div class="merchants-wrapper">
+      <h2>我发布的优惠</h2>
+      <div class="merchants-list">
+        <div class="item">
+          <div class="item-top">
+            <h2>Lv.1会员进店享受9折优惠</h2>
+            <p>百年征程波澜壮阔，百年初心历久弥坚。7月1日上午，庆祝中国共产党成立100周年大会在北京天安门广场隆重举行，各界代表7万余人以盛…百年征程波澜壮阔，百年初心历久弥坚。7月1日上午，庆祝中国共产党成立100周年大会在北京天安门广场隆重举行，各界代表7万余人以盛…</p>
+            <div class="item-tags">
+              <span>审核通过</span>
+            </div>
+          </div>
+          <div class="item-bottom">
+            <div hover-class="bg-hover">修改</div>
+            <div hover-class="bg-hover">删除</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn-wrapper">
+      <div class="btn" hover-class="text-hover" @click="$linkTo('./AddDiscounts')">发布优惠信息</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    appName: '商户中心',
+    name: 'Merchants',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .merchants {
+    margin: 0 32px;
+    padding-top: 32px;
+    padding-bottom: 140px;
+
+    .merchants-wrapper {
+      margin-top: 58px;
+
+      & > h2 {
+        margin-bottom: 46px;
+        font-weight: 600;
+        font-size: 34px;
+        color: #1D2229;
+      }
+
+      .item {
+        margin-bottom: 24px;
+        background: #FCFCFC;
+        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+        border-radius: 16px;
+
+        .item-top {
+          padding: 24px;
+
+          h2 {
+            margin-bottom: 12px;
+            font-size: 34px;
+            color: #333333;
+          }
+
+          p {
+            line-height: 1.3;
+            font-size: 30px;
+            color: #999999;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+
+          .item-tags {
+            display: flex;
+            align-items: center;
+            margin-top: 24px;
+
+            span {
+              height: 48px;
+              line-height: 48px;
+              padding: 0 16px;
+              color: #3BBC37;
+              font-size: 26px;
+              background: #F5FCF5;
+              border: 1px solid #E2F6E1;
+              border-radius: 8px;
+
+              &.status-2 {
+                color: #E23C3C;
+                background: #E23C3C;
+                border: 1px solid #FAE2E2;
+              }
+
+              &.status-0 {
+                color: #FF883C;
+                background: #FFF9F5;
+                border: 1px solid #FFEDE2;
+              }
+            }
+          }
+        }
+
+        .item-bottom {
+          display: flex;
+          align-items: center;
+          height: 88px;
+          border-top: 1px solid #EEEEEE;
+
+          div {
+            flex: 1;
+            height: 100%;
+            line-height: 88px;
+            text-align: center;
+            font-size: 28px;
+            color: #687DA6;
+          }
+        }
+      }
+    }
+
+    .top {
+      display: flex;
+      align-items: center;
+      padding: 24px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+      border-radius: 16px;
+
+      image {
+        width: 112px;
+        height: 112px;
+        margin-right: 24px;
+      }
+
+      .right {
+        flex: 1;
+      }
+
+      h2 {
+        margin-bottom: 14px;
+        font-weight: 600;
+        font-size: 34px;
+        color: #333333;
+      }
+
+      p {
+        line-height: 1.3;
+        font-size: 26px;
+        color: #999999;
+      }
+    }
+  }
+</style>