新增页面

src/views/content/autoFM/detail.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="auto">
+      <el-form-item label="海外电台ID：">
+        <span>123</span>
+      </el-form-item>
+      <el-form-item label="电台名称：">
+        <span>猫王吟游乡村之旅</span>
+      </el-form-item>
+      <el-form-item label="电台网址：">
+        <el-link :underline="false" href="">www.baidu.com</el-link>
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <span>下线</span>
+      </el-form-item>
+      <el-form-item label="故障次数：">
+        <span>3</span>
+      </el-form-item>
+      <el-form-item label="最新故障时间：">
+        <span>2022-05-10 18:00:00</span>
+      </el-form-item>
+      <el-form-item label="监控：">
+        <el-select placeholder="是否开启监控">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="故障日志：">
+        <el-input type="textarea" rows="10" readonly />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods:{
+    // 取消
+    cancel(){
+      this.$tab.closeOpenPage("/content/autoFM");
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form{
+  width: 500px;
+}
+</style>

src/views/content/autoFM/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <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 type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table :data="tableData">
+      <el-table-column label="海外电台ID" align="center" />
+      <el-table-column label="电台名称" align="center" />
+      <el-table-column label="当前状态" align="center" />
+      <el-table-column label="监控" align="center" />
+      <el-table-column label="故障次数" align="center" />
+      <el-table-column label="最新故障时间" align="center" />
+      <el-table-column label="操作" align="center">
+        <el-button type="text" @click="getEdit">编辑</el-button>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData:[{
+        id: 1
+      }]
+    }
+  },
+  methods:{
+    // 搜索
+    getSearch(){
+
+    },
+    // 重置
+    getRefresh(){
+
+    },
+    getEdit(){
+      this.$router.push({
+        path: `/content/autoFM/detail`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/goods/list/detail.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <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 label="商品简介：">
+        <el-input type="textarea" rows="4" placeholder="请输入商品简介" />
+      </el-form-item>
+      <el-form-item label="商品价格：">
+        <el-input placeholder="请输入商品价格" />
+      </el-form-item>
+      <el-form-item label="商品图片：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+      <el-form-item label="跳转网址：">
+        <el-input placeholder="请输入跳转地址" />
+      </el-form-item>
+      <el-form-item label="有效期：">
+        <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
+      </el-form-item>
+      <el-form-item label="权重：">
+        <el-input-number :min="0" :max="9" />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Upload from '@/components/Upload/index'
+export default {
+  components: { Upload },
+  data() {
+    return {
+
+    }
+  },
+  methods:{
+    cancel(){
+      this.$tab.closeOpenPage("/goods/goodsList");
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 500px;
+}
+</style>

src/views/goods/list/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="推荐位置：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品名称：">
+        <el-input />
+      </el-form-item>
+      <el-form-item label="商品简介：">
+        <el-input />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table>
+      <el-table-column label="推荐位置"></el-table-column>
+      <el-table-column label="商品名称"></el-table-column>
+      <el-table-column label="商品简介"></el-table-column>
+      <el-table-column label="商品价格"></el-table-column>
+      <el-table-column label="商品图片"></el-table-column>
+      <el-table-column label="当前状态"></el-table-column>
+      <el-table-column label="权重"></el-table-column>
+      <el-table-column label="有效期"></el-table-column>
+      <el-table-column label="操作">
+        <el-button>编辑</el-button>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    // 搜索
+    getSearch() {
+
+    },
+    // 重置
+    getRefresh() {
+
+    },
+    // 新增 编辑
+    getDetail() {
+      this.$router.push({
+        path: `/goods/goodsList/detail`
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/operation/recommend/component/tab_1.vue

@@ -0,0 +1,280 @@
+<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>

src/views/operation/recommend/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="推荐" name="first">
+        <tab1 />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import tab1 from './component/tab_1.vue'
+
+export default {
+  components:{
+    tab1
+  },
+  data() {
+    return {
+      activeTab: 'first',
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>