扫描

src/assets/styles/btn.scss

@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import "./variables.scss";
 
 @mixin colorBtn($color) {
   background: $color;
@@ -14,31 +14,31 @@
 }
 
 .blue-btn {
-  @include colorBtn($blue)
+  @include colorBtn($blue);
 }
 
 .light-blue-btn {
-  @include colorBtn($light-blue)
+  @include colorBtn($light-blue);
 }
 
 .red-btn {
-  @include colorBtn($red)
+  @include colorBtn($red);
 }
 
 .pink-btn {
-  @include colorBtn($pink)
+  @include colorBtn($pink);
 }
 
 .green-btn {
-  @include colorBtn($green)
+  @include colorBtn($green);
 }
 
 .tiffany-btn {
-  @include colorBtn($tiffany)
+  @include colorBtn($tiffany);
 }
 
 .yellow-btn {
-  @include colorBtn($yellow)
+  @include colorBtn($yellow);
 }
 
 .pan-btn {
@@ -64,7 +64,7 @@
 
   &:before,
   &:after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     right: 0;
@@ -97,3 +97,4 @@
   font-size: 14px;
   border-radius: 4px;
 }
+

src/components/common/container.vue

@@ -5,6 +5,9 @@
       <slot> </slot>
     </div>
     <div>
+      <!-- <template v-slot:header>
+              <h1>v-slot需要放置在template中</h1>
+            </template> -->
       <slot name="header"> </slot>
     </div>
   </div>

src/layout/components/AppMain.vue

@@ -38,7 +38,7 @@ export default {
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: 60px;
 }
 
 .hasTagsView {

src/views/components/index/scan.vue

@@ -0,0 +1,47 @@
+<template>
+  <container title="扫描">
+    <div class="input-box">
+      <el-input placeholder="请扫描会员卡" v-model="input1">
+        <img src="../../../assets/images/icon_scan.png" slot="suffix" />
+      </el-input>
+    </div>
+    <h1 class="mian-title">会员信息</h1>
+    <div class="info">
+      <p>姓名：欧阳娜娜</p>
+      <p>会员码：24878389892</p>
+      <p>手机号码：15902021122</p>
+      <p>剩余积分：8328</p>
+    </div>
+  </container>
+</template>
+
+<script>
+export default {
+  name: "SaasMemberScan",
+
+  data() {
+    return {
+      input1: "",
+    };
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.input-box {
+  margin: 15px 0 44px;
+  img {
+    margin: 8px 8px 0 0;
+  }
+}
+.info {
+  padding-top: 10px;
+  color: #666666;
+  font-size: 15px;
+  line-height: 18px;
+}
+</style>

src/views/index.vue

@@ -2,25 +2,18 @@
   <div>
     <el-row :gutter="20">
       <el-col :span="9">
-        <div class="grid-content bg-purple">
-          <container title="扫描">
-            <!-- <template v-slot:header>
-              <h1>v-slot需要放置在template中</h1>
-            </template> -->
-            <h1>123</h1>
-          </container>
-          <container title="扫描" style="margin-top: 16px"></container>
-        </div>
+        <!-- <h1 class="mian-title">会员信息</h1> -->
+        <scan></scan>
+        <container title="商品列表" style="margin-top: 16px"></container>
       </el-col>
       <el-col :span="15">
-        <div class="grid-content bg-purple">
-          <container title="扫描"></container>
-        </div>
+        <container title="扫描"></container>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+import scan from "./components/index/scan.vue";
 export default {
   name: "Index",
   data() {
@@ -31,6 +24,9 @@ export default {
   computed: {},
   created() {},
   methods: {},
+  components: {
+    scan,
+  },
 };
 </script>