猫舍管理 运营管理

src/views/ohplay/operation/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="6">
+        <el-image :src="require('@/assets/images/ohplay/search.png')" />
+        <el-image :class="['border', active === item.id ? 'active' : '']" v-for="item in img" :key="item.id"
+          :src="item.url" @click="getActive(item.id)" />
+        <el-image :src="require('@/assets/images/ohplay/comment.png')" />
+      </el-col>
+      <el-col v-show="active === 1" :span="18">
+        <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
+          <el-form-item label-width="auto" :label='`广告位${index + 1}`' />
+          <el-form-item label="Banner：">
+            <Upload listType="picture-card" measure="343*140" />
+          </el-form-item>
+          <el-form-item label="选择日期：">
+            <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间"
+              end-placeholder="结束时间" />
+          </el-form-item>
+          <el-form-item label="跳转：">
+            <el-select placeholder="请选择跳转页面">
+              <el-option />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网址：">
+            <el-input placeholder="请输入网址" />
+          </el-form-item>
+          <el-form-item>
+            <el-button>清空</el-button>
+            <el-button type="primary">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col v-show="active === 2" :span="18">
+        <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
+          <el-form-item label-width="auto" :label='`推广位${index + 1}`' />
+          <el-form-item label="Banner：">
+            <Upload listType="picture-card" measure="100*100" />
+          </el-form-item>
+          <el-form-item label="选择日期：">
+            <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间"
+              end-placeholder="结束时间" />
+          </el-form-item>
+          <el-form-item label="跳转：">
+            <el-select placeholder="请选择跳转页面">
+              <el-option />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网址：">
+            <el-input placeholder="请输入网址" />
+          </el-form-item>
+          <el-form-item>
+            <el-button>清空</el-button>
+            <el-button type="primary">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col v-show="active === 3" :span="18">
+        <el-form label-width="100px" v-for="(item, index) in 4" :key="index">
+          <el-form-item label-width="auto" :label='`快捷位${index + 1}`' />
+          <el-form-item label="文字：">
+            <el-input placeholder="请输入快捷按钮文字" />
+          </el-form-item>
+          <el-form-item label="选择日期：">
+            <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间"
+              end-placeholder="结束时间" />
+          </el-form-item>
+          <el-form-item label="跳转：">
+            <el-select placeholder="请选择跳转页面">
+              <el-option />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网址：">
+            <el-input placeholder="请输入网址" />
+          </el-form-item>
+          <el-form-item>
+            <el-button>清空</el-button>
+            <el-button type="primary">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Upload from "@/components/Upload/index"
+export default {
+  components: {
+    Upload
+  },
+  data() {
+    return {
+      img: [{
+        id: 1,
+        url: require('@/assets/images/ohplay/banner.png')
+      }, {
+        id: 2,
+        url: require('@/assets/images/ohplay/pop.png')
+      }, {
+        id: 3,
+        url: require('@/assets/images/ohplay/shortcut.png')
+      }],
+      active: 1
+    }
+  },
+  methods: {
+    getActive(id) {
+      this.active = id
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  background: #000;
+  display: block;
+}
+
+.border {
+  position: relative;
+  border-top: 1px solid yellow;
+  border-right: 1px solid yellow;
+  border-left: 1px solid yellow;
+}
+
+.border:nth-child(4) {
+  border-bottom: 1px solid yellow;
+}
+
+.active::after {
+  content: '';
+  background: rgba(255, 255, 0, 0.3);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.el-col-18 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.el-form {
+  border: 1px solid #dcdfe6;
+  box-shadow: 5px 5px 5px 0px #dcdfe6;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+</style>