|
|
@@ -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>
|
