123

src/renderer/src/App.vue

@@ -1,6 +1,62 @@
 <template>
   <div class="appClass" v-if="isVip">
-    vip
+    <el-row>
+      <el-col :span="2">
+        <div class="left">
+          <div class="leftThird">
+            <div @click="clickLeft('1')" style="cursor: pointer;">
+              <span :style="`color:${type === '1' ? '#2A82E4' : '#808080'};position: relative; top: -4px;`">
+                数据新增
+              </span>
+            </div>
+          </div>
+          <div class="leftfourth">
+            <div @click="clickLeft('2')" style="cursor: pointer;">
+              <span :style="`color:${type === '2' ? '#2A82E4' : '#808080'};position: relative; top: -4px;`">
+                积分数据
+              </span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <div class="right">
+          <div v-show="type === '1'">
+            <div style="padding: 8px;">
+              <el-row style="padding: 8px;">
+                <el-col :span="22">
+                  <el-button type="primary" @click="addNewData">新增项目号码</el-button>
+                </el-col>
+                <el-col :span="2">
+                  <el-button type="primary">保存</el-button>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col>
+                  <el-table stripe  :data="addTableData" border style="width: 100%;height: calc(100vh - 72px);">
+                    <el-table-column type="index" width="50" />
+                    <el-table-column v-for="(headerItem, heraderIndex) in addTableHeader" :prop="headerItem.prop"
+                      :label="headerItem.label" :key="heraderIndex" />
+                    <el-table-column label="操作" width="101">
+                      <template #default="scope">
+                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">
+                          移除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <div v-show="type === '2'">
+            <div>
+              积分数据
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
   <div v-else class="noVip">
     <h3>
@@ -20,9 +76,93 @@ export default {
       _: _,
       dayjs: dayjs,
       isVip: false,
+      type: "1",
+      addTableData: [
+        {
+          xiangmu: "111",
+          pos1: "111",
+          pos2: "111",
+          pos3: "111",
+          pos4: "111",
+          pos5: "111",
+          pos6: "111",
+          pos7: "111",
+          pos8: "111",
+          pos9: "111",
+          pos10: "111"
+        }
+      ],
+      addTableHeader: [
+        {
+          prop: "xiangmu",
+          label: "项目"
+        },
+        {
+          prop: "pos1",
+          label: "位置1"
+        },
+        {
+          prop: "pos2",
+          label: "位置2"
+        },
+        {
+          prop: "pos3",
+          label: "位置3"
+        },
+        {
+          prop: "pos4",
+          label: "位置4"
+        },
+        {
+          prop: "pos5",
+          label: "位置5"
+        },
+        {
+          prop: "pos6",
+          label: "位置6"
+        },
+        {
+          prop: "pos7",
+          label: "位置7"
+        },
+        {
+          prop: "pos8",
+          label: "位置8"
+        },
+        {
+          prop: "pos9",
+          label: "位置9"
+        },
+        {
+          prop: "pos10",
+          label: "位置10"
+        },
+      ],
+    }
+  },
+  methods: {
+    clickLeft(type) {
+      this.type = type
+    },
+    handleDelete(index, item) {
+      console.log(8874, index, item)
+    },
+    addNewData() {
+      this.addTableData.push({
+        xiangmu: "111",
+        pos1: "111",
+        pos2: "111",
+        pos3: "111",
+        pos4: "111",
+        pos5: "111",
+        pos6: "111",
+        pos7: "111",
+        pos8: "111",
+        pos9: "111",
+        pos10: "111"
+      })
     }
   },
-  methods: {},
   async mounted() {
     let fiveDay = dayjs('2024-08-19T00:00:00').valueOf()
     if (!this.isVip) {
@@ -45,6 +185,34 @@ export default {
   color: #000;
 }
 
+.left {
+  height: 100vh;
+  background-color: #e5e5e5;
+  text-align: center;
+}
+
+
+
+
+.leftThird {
+  font-size: 1.1em;
+  padding: 16vh 0 0 0;
+  height: 15vh;
+  text-align: center;
+}
+
+.leftfourth {
+  font-size: 1.1em;
+  padding: 16vh 0 0 0;
+  height: 15vh;
+  text-align: center;
+}
+
+.right {
+  height: 100vh;
+}
+
+
 .noVip {
   text-align: center;
   margin-top: 40vh;