|
@@ -1,280 +0,0 @@
|
|
|
-<template>
|
|
|
- <div style="display:flex">
|
|
|
- <el-image :src="require('@/assets/images/operation/recommend.svg')" />
|
|
|
- <div :class="['item', active === item.id ? 'active' : '']"
|
|
|
- :style="{top: item.top + 'px', height: item.height + 'px'}" v-for="item in tabs" :key="item.id"
|
|
|
- @click="getActive(item.id)" />
|
|
|
-
|
|
|
- <!-- 001 -->
|
|
|
- <div v-show="active === 1">
|
|
|
- <el-form label-width="auto" v-for="(item, index) in 3" :key="index">
|
|
|
- <el-form-item label-width="0" :label="index + 1" />
|
|
|
- <el-form-item label="时间:">
|
|
|
- <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="封面:">
|
|
|
- <el-select value="2" placeholder="选择封面模式">
|
|
|
- <el-option value="1" label="使用内容封面" />
|
|
|
- <el-option value="2" label="自定义封面" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <!-- 如果封面选择使用内容封面择隐藏 -->
|
|
|
- <el-form-item label="图片:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 002 / 003 -->
|
|
|
- <div v-show="active === 2 || active === 3">
|
|
|
- <el-form label-width="auto" v-for="(item, index) in 6" :key="index">
|
|
|
- <el-form-item label-width="0" :label="index + 1" />
|
|
|
- <el-form-item label="时间:">
|
|
|
- <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="图片:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="行为:">
|
|
|
- <el-select placeholder="请选择行为">
|
|
|
- <el-option value="1" label="App内跳转" />
|
|
|
- <el-option value="2" label="打开节目" />
|
|
|
- <el-option value="3" label="调用浏览器打开H5(内)" />
|
|
|
- <el-option value="4" label="调用浏览器打开H5(外)" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="参数:">
|
|
|
- <el-input placeholder="请输入行为对应参数" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 004 -->
|
|
|
- <div v-show="active === 4">
|
|
|
- <el-form label-width="auto" v-for="(item, index) in 6" :key="index">
|
|
|
- <el-form-item label-width="0" :label="index + 1" />
|
|
|
- <el-form-item label="封面:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 005 / 006 / 008 / 010 / 012 -->
|
|
|
- <div v-show="active === 5 || active === 6 || active === 8 || active === 10 || active === 12">
|
|
|
- <el-form label-width="auto" v-for="(item, index) in 6" :key="index">
|
|
|
- <el-form-item label-width="0" :label="index + 1" />
|
|
|
- <el-form-item label="时间:">
|
|
|
- <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="模式:">
|
|
|
- <el-select placeholder="请选择模式">
|
|
|
- <el-option value="1" label="自动推荐内容" />
|
|
|
- <el-option value="1" label="手动定义内容" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <!-- 以下手动定义内容才显示 -->
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="active === 8" label="简介:">
|
|
|
- <el-input type="textarea" rows="4" placeholder="请输入简介" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="封面:">
|
|
|
- <el-select value="2" placeholder="选择封面模式">
|
|
|
- <el-option value="1" label="使用内容封面" />
|
|
|
- <el-option value="2" label="自定义封面" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <!-- 如果封面选择使用内容封面择隐藏 -->
|
|
|
- <el-form-item label="图片:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 007 -->
|
|
|
- <div v-show="active === 7">
|
|
|
- <el-form label-width="auto" v-for="(item, index) in 3" :key="index">
|
|
|
- <el-form-item label-width="0" :label="index + 1" />
|
|
|
- <el-form-item label="时间:">
|
|
|
- <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="主题:">
|
|
|
- <el-input placeholder="请输入主题名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="图片:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 009 -->
|
|
|
- <div v-show="active === 9">
|
|
|
- <el-form label-width="auto">
|
|
|
- <el-form-item label="时间:">
|
|
|
- <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="标题:">
|
|
|
- <el-input placeholder="请输入标题" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="简介:">
|
|
|
- <el-input type="textarea" rows="4" placeholder="请输入简介" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-form label-width="auto" v-for="(item, index) in 8" :key="index">
|
|
|
- <el-form-item label-width="0" :label="index + 1" />
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="active === 8" label="简介:">
|
|
|
- <el-input type="textarea" rows="4" placeholder="请输入简介" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="封面:">
|
|
|
- <el-select value="2" placeholder="选择封面模式">
|
|
|
- <el-option value="1" label="使用内容封面" />
|
|
|
- <el-option value="2" label="自定义封面" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <!-- 如果封面选择使用内容封面择隐藏 -->
|
|
|
- <el-form-item label="图片:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 011 -->
|
|
|
- <div v-show="active === 11">
|
|
|
- <el-form label-width="auto">
|
|
|
- <el-form-item label="时间:">
|
|
|
- <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="标题:">
|
|
|
- <el-input placeholder="请输入标题" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="简介:">
|
|
|
- <el-input type="textarea" rows="4" placeholder="请输入简介" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="图片:">
|
|
|
- <Upload listType="picture-card" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="内容:">
|
|
|
- <el-input prefix-icon="el-icon-search" placeholder="选择内容" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 弹窗 -->
|
|
|
- <el-dialog title="添加内容">
|
|
|
-
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import Upload from '@/components/Upload/index'
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- Upload
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 模块切换
|
|
|
- tabs: [{
|
|
|
- id: 1,
|
|
|
- top: 150,
|
|
|
- height: 225
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- top: 380,
|
|
|
- height: 175
|
|
|
- }, {
|
|
|
- id: 3,
|
|
|
- top: 560,
|
|
|
- height: 185
|
|
|
- }, {
|
|
|
- id: 4,
|
|
|
- top: 750,
|
|
|
- height: 315
|
|
|
- }, {
|
|
|
- id: 5,
|
|
|
- top: 1070,
|
|
|
- height: 645
|
|
|
- }, {
|
|
|
- id: 6,
|
|
|
- top: 1720,
|
|
|
- height: 185
|
|
|
- }, {
|
|
|
- id: 7,
|
|
|
- top: 1910,
|
|
|
- height: 220
|
|
|
- }, {
|
|
|
- id: 8,
|
|
|
- top: 2140,
|
|
|
- height: 315
|
|
|
- }, {
|
|
|
- id: 9,
|
|
|
- top: 2460,
|
|
|
- height: 295
|
|
|
- }, {
|
|
|
- id: 10,
|
|
|
- top: 2760,
|
|
|
- height: 600
|
|
|
- }, {
|
|
|
- id: 11,
|
|
|
- top: 3370,
|
|
|
- height: 260
|
|
|
- }, {
|
|
|
- id: 12,
|
|
|
- top: 3635,
|
|
|
- height: 600
|
|
|
- }],
|
|
|
- // 焦点模块
|
|
|
- active: 1,
|
|
|
- // 表单
|
|
|
- form: {},
|
|
|
- list: [{}]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getActive(id) {
|
|
|
- if (this.active !== id) {
|
|
|
- this.active = id
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.item {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- width: 365px;
|
|
|
- border: 1px solid yellow;
|
|
|
-}
|
|
|
-
|
|
|
-.active {
|
|
|
- background: rgba(255, 255, 0, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-.el-form {
|
|
|
- width: 500px;
|
|
|
- margin-left: 30px;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- box-shadow: 5px 5px 5px 0px #dcdfe6;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-</style>
|