直客首页组件

src/assets/common/lang/zhCN/fill.js

@@ -8054,6 +8054,8 @@ export const obj = {
     xitongxiaoxi: '系统消息',
     xiazapdf: '下载PDF',
     qiyemdijiefjs: '企业码地接费结算',
+    zicaidan: '二級菜单',
+    beijinse: '背景色',
   },
   //#endregion
 }

src/assets/common/lang/zhTW/fill.js

@@ -8054,6 +8054,8 @@ export const obj = {
     xitongxiaoxi: '系統消息',
     xiazapdf: '下載PDF',
     qiyemdijiefjs: '企業碼地接費結算',
+    zicaidan: '二級菜單',
+    beijinse: '背景色',
   },
   //#endregion
 }

src/components/WebSet/WebSiteEdit.vue

@@ -278,6 +278,14 @@
       <searcheldialog v-if="currentEditItem.Id=='search_el'" :plugData="currentEditItemData"></searcheldialog>
       <!-- 自定版型 其他 -->
       <otherdialog v-if="currentEditItem.Id=='white_label_other'" :plugData="currentEditItemData"></otherdialog>
+      <!-- 首页组件1 -->
+      <indexNav v-if="currentEditItem.Id=='index_nav'" :plugData="currentEditItemData"> </indexNav>
+      <!-- 首页组件2 -->
+      <indexSlider1 v-if="currentEditItem.Id=='index_slider1'" :plugData="currentEditItemData"> </indexSlider1>
+      <!-- 首页组件3 -->
+      <indexRoll1 v-if="currentEditItem.Id=='index_roll1'" :plugData="currentEditItemData"> </indexRoll1>
+      <!-- 首页组件4 -->
+      <indexRoll2 v-if="currentEditItem.Id=='index_roll2'" :plugData="currentEditItemData"> </indexRoll2>
       <span slot="footer" class="dialog-footer">
         <el-button @click="isShowDialog = false" size="small">{{$t('pub.cancelBtn')}}</el-button>
         <el-button type="danger" size="small" @click="setSubPlugData()">{{$t('pub.sureBtn')}}</el-button>
@@ -303,6 +311,10 @@
   import searchsdialog from "../WebSet/plug-in/searchs_dialog.vue"
   import searcheldialog from "../WebSet/plug-in/searchel_dialog"
   import otherdialog from "../WebSet/plug-in/other_dialog"
+  import indexNav from "../WebSet/home/indexNav"
+  import indexSlider1 from "../WebSet/home/indexSlider1"
+  import indexRoll1 from "../WebSet/home/indexRoll1"
+  import indexRoll2 from "../WebSet/home/indexRoll2"
   export default {
     props: ["templateData"],
     data() {
@@ -310,7 +322,7 @@
         //模板列表
         templateList: [],
         //模板编号
-        templateId: 0,
+        templateId: 18,
         //数据列表
         dataList: [],
         //模板详情列表
@@ -384,7 +396,11 @@
       searchfdialog,
       searchsdialog,
       searcheldialog,
-      otherdialog
+      otherdialog,
+      indexNav,
+      indexSlider1,
+      indexRoll1,
+      indexRoll2,
     },
     methods: {
       changeCountry(){
@@ -443,6 +459,7 @@
         this.currentEditItem = item;
         this.commonTitle = item.plugData.Title;
         this.currentEditItemData = JSON.parse(JSON.stringify(item.plugData));
+        console.log(this.currentEditItemData,'-----')
       },
       //获取数据
       setSubPlugData() {
@@ -488,6 +505,7 @@
             if (res.data.resultCode == 1) {
               this.realTemplateList = res.data.data;
               this.templateList=this.realTemplateList
+              console.log(this.templateList,'====')
             } else {
               this.Error(res.data.message);
             }
@@ -532,6 +550,7 @@
     },
     mounted() {
       this.getTemplate();
+      this.getTemplateDetails()
     },
     watch: {
       dataList: {

src/components/WebSet/home/indexRoll1.vue

+<style scoped>
+  .WebSite_slider .text-warning {
+    color: #8a6d3b;
+  }
+
+  .WebSite_slider .webSliderDiv {
+    width: 150px;
+    line-height: 0;
+    height: 100px;
+    overflow: hidden;
+    /* height: 234px; */
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .WebSite_slider .webSliderDiv .web_imgUrl {
+    width: 100%;
+    height: 100%;
+  }
+  .WebSite_slider .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .WebSite_slider .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+  /deep/.WebSite_slider .el-form-item__content{
+    line-height: 20px;
+  }
+  .caidantext{
+    font-size: 16px;
+    font-weight: bold;
+    color: #f45c43;
+  }
+  .caidantext.caidantext2{
+    color: dodgerblue;
+  }
+  .row{
+    display: flex;
+    flex-direction: row;
+  }
+  .rowSbAc{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .rowEnd{
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+  }
+  .colAs{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+  }
+  .flex{
+    flex: 1;
+  }
+  .flex-shrink{
+    flex: 1;
+    flex-shrink: 0;
+  }
+
+</style>
+<template>
+  <div class="WebSite_slider">
+    <el-form label-width="100px">
+      <!-- <el-row>
+        <el-col :span="24">
+          <el-form-item>
+            <p class="text-warning">※ {{$t('objFill.v101.wutuzbxians')}}</p>
+          </el-form-item>
+        </el-col>
+      </el-row> -->
+      <el-row class="row">
+        <el-form-item :label="$t('objFill.v101.zhubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
+          <el-input type="text" v-model="plugData.Title"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.fubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
+          <el-input type="text" v-model="plugData.SubTitle"></el-input>
+        </el-form-item>
+      </el-row>
+      <el-row style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
+        <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
+          <div class="webSliderDiv" style="width: 100px;height: 100px;">
+            <el-upload :http-request="UploadAttachmentCover" :multiple="true"
+              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+              <img v-if="plugData.CoverImg" :src="plugData.CoverImg" class="web_imgUrl" alt="" />
+              <div class="addIconDiv">
+                <i class="web_addImg iconfont icon-img_haha"></i>
+                <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="plugData.CoverImg=''"></i>
+              </div>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.v101.jianjie')" class="flex" style="margin-bottom: 0;">
+          <el-input type="textarea"
+          :rows="2" v-model="plugData.Describe"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.v101.beijinse')" style="margin-bottom: 0;flex-shrink: 0;">
+          <el-color-picker style='vertical-align: middle;' v-model="plugData.BgColor"></el-color-picker>
+        </el-form-item>
+      </el-row>
+      <table>
+        <tbody v-for="(item,index) in plugData.NavList" :key="index">
+          <tr>
+            <td class="caidantext">
+              {{$t('objFill.caidan')}}{{index+1}}:
+            </td>
+            <td></td>
+            <td class="rowEnd">
+              <div>
+                <el-tooltip class="item" effect="dark" :content="'+ '+$t('objFill.caidan')" placement="top">
+                  <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu(1)"></el-button>
+                </el-tooltip>
+                <el-tooltip v-show="plugData.NavList.length>1" class="item" effect="dark" :content="'- '+$t('objFill.caidan')" placement="top">
+                  <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(1,index)"></el-button>
+                </el-tooltip>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="w350">
+              <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
+                <div class="webSliderDiv" @click="clickIndex=index">
+                  <el-upload v-if="item.FileType==1" :http-request="UploadAttachment" :multiple="true"
+                    accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+                    <img v-if="item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt="" />
+                    <div class="addIconDiv">
+                      <i class="web_addImg iconfont icon-img_haha"></i>
+                      <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.FileUrl=''"></i>
+                    </div>
+                  </el-upload>
+                  <el-upload v-if="item.FileType==2" :http-request="UploadAttachment" :multiple="true"
+                    accept="video/mp4,video/webm" :show-file-list="false" action="">
+                    <video v-if="item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt=""></video>
+                    <div class="addIconDiv">
+                      <i class="web_addImg iconfont icon-img_haha"></i>
+                      <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.FileUrl=''"></i>
+                    </div>
+                  </el-upload>
+                </div>
+                <div v-if="plugData.Type==1">{{$t('objFill.v101.tupiqscsqin')}}</div>
+                <div v-else>{{$t('objFill.v101.tupiqscersw')}}</div>
+              </el-form-item>
+            </td>
+            <td class="flex">
+              <el-form-item :label="$t('objFill.v101.fengmian')+$t('system.query_type')+(index+1)" style="margin-bottom: 0;">
+                <el-select v-model="item.FileType" style="width: 100%;">
+                  <el-option
+                    v-for="item in typeList"
+                    :key="item.Id"
+                    :label="item.Name"
+                    :value="item.Id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="$t('objFill.v101.lianjie')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.LinkUrl"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('hotel.hotel_describle')+(index+1)">
+                <el-input type="textarea"
+                :rows="2" v-model="item.SubDescribe"></el-input>
+              </el-form-item>
+            </td>
+            <td class="colAs">
+              <el-form-item :label="$t('objFill.v101.zhubiaoti')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.SubName"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('objFill.fubiaoti')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.SubEnName"></el-input>
+              </el-form-item>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+        clickIndex: 0, //点击图片索引
+        typeList: [
+          {Name: this.$t('system.label_img'),Id: 1},
+          {Name: this.$t('objFill.shipin'),Id: 2},
+        ],
+        clickType: 0,//1主菜单  2二级菜单
+        MenuList:{
+          FileType: 1,
+          FileUrl: '',
+          LinkUrl: '',
+          MenuName: '',
+          MenuSubName: '',
+        },
+        SubMenuList: {
+          FileType: 1,
+          FileUrl: '',
+          LinkUrl: '',
+          MenuName: '',
+          MenuSubName: '',
+          SubMenuList: null,
+        }
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      addMenu(type,index){
+        this.clickType = type
+        this.plugData.NavList.push(JSON.parse(JSON.stringify(this.MenuList)))
+      },
+      delMenu(type,index,i){
+        this.clickType = type
+        if(type==1){
+          this.plugData.NavList.splice(index,1)
+        }
+      },
+      //上传图片
+      UploadAttachment(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.NavList[this.clickIndex].FileUrl = imgUrl;
+        });
+      },
+      UploadAttachmentCover(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.CoverImg = imgUrl;
+        });
+      },
+    },
+    mounted() {}
+  };
+
+</script>

src/components/WebSet/home/indexRoll2.vue

+<style scoped>
+  .WebSite_slider .text-warning {
+    color: #8a6d3b;
+  }
+
+  .WebSite_slider .webSliderDiv {
+    width: 150px;
+    line-height: 0;
+    height: 100px;
+    overflow: hidden;
+    /* height: 234px; */
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .WebSite_slider .webSliderDiv .web_imgUrl {
+    width: 100%;
+    height: 100%;
+  }
+  .WebSite_slider .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .WebSite_slider .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+  /deep/.WebSite_slider .el-form-item__content{
+    line-height: 20px;
+  }
+  .caidantext{
+    font-size: 16px;
+    font-weight: bold;
+    color: #f45c43;
+  }
+  .caidantext.caidantext2{
+    color: dodgerblue;
+  }
+  .row{
+    display: flex;
+    flex-direction: row;
+  }
+  .rowSbAc{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .rowEnd{
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+  }
+  .colAs{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+  }
+  .flex{
+    flex: 1;
+  }
+  .flex-shrink{
+    flex: 1;
+    flex-shrink: 0;
+  }
+
+</style>
+<template>
+  <div class="WebSite_slider">
+    <el-form label-width="100px">
+      <!-- <el-row>
+        <el-col :span="24">
+          <el-form-item>
+            <p class="text-warning">※ {{$t('objFill.v101.wutuzbxians')}}</p>
+          </el-form-item>
+        </el-col>
+      </el-row> -->
+      <el-row class="row">
+        <el-form-item :label="$t('objFill.v101.zhubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
+          <el-input type="text" v-model="plugData.Title"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.fubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
+          <el-input type="text" v-model="plugData.SubTitle"></el-input>
+        </el-form-item>
+      </el-row>
+      <el-row style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
+        <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
+          <div class="webSliderDiv" style="width: 100px;height: 100px;">
+            <el-upload :http-request="UploadAttachmentCover" :multiple="true"
+              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+              <img v-if="plugData.CoverImg" :src="plugData.CoverImg" class="web_imgUrl" alt="" />
+              <div class="addIconDiv">
+                <i class="web_addImg iconfont icon-img_haha"></i>
+                <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="plugData.CoverImg=''"></i>
+              </div>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.v101.jianjie')" class="flex" style="margin-bottom: 0;">
+          <el-input type="textarea"
+          :rows="2" v-model="plugData.Describe"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.v101.beijinse')" style="margin-bottom: 0;flex-shrink: 0;">
+          <el-color-picker style='vertical-align: middle;' v-model="plugData.BgColor"></el-color-picker>
+        </el-form-item>
+      </el-row>
+      <table>
+        <tbody v-for="(item,index) in plugData.NavList" :key="index">
+          <tr>
+            <td class="caidantext">
+              {{$t('objFill.caidan')}}{{index+1}}:
+            </td>
+            <td></td>
+            <td class="rowEnd">
+              <div>
+                <el-tooltip class="item" effect="dark" :content="'+ '+$t('objFill.caidan')" placement="top">
+                  <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu(1)"></el-button>
+                </el-tooltip>
+                <el-tooltip v-show="plugData.NavList.length>1" class="item" effect="dark" :content="'- '+$t('objFill.caidan')" placement="top">
+                  <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(1,index)"></el-button>
+                </el-tooltip>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="w350">
+              <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
+                <div class="webSliderDiv" @click="clickIndex=index">
+                  <el-upload v-if="item.FileType==1" :http-request="UploadAttachment" :multiple="true"
+                    accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+                    <img v-if="item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt="" />
+                    <div class="addIconDiv">
+                      <i class="web_addImg iconfont icon-img_haha"></i>
+                      <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.FileUrl=''"></i>
+                    </div>
+                  </el-upload>
+                  <el-upload v-if="item.FileType==2" :http-request="UploadAttachment" :multiple="true"
+                    accept="video/mp4,video/webm" :show-file-list="false" action="">
+                    <video v-if="item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt=""></video>
+                    <div class="addIconDiv">
+                      <i class="web_addImg iconfont icon-img_haha"></i>
+                      <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.FileUrl=''"></i>
+                    </div>
+                  </el-upload>
+                </div>
+                <div v-if="plugData.Type==1">{{$t('objFill.v101.tupiqscsqin')}}</div>
+                <div v-else>{{$t('objFill.v101.tupiqscersw')}}</div>
+              </el-form-item>
+            </td>
+            <td class="flex">
+              <el-form-item :label="$t('objFill.v101.fengmian')+$t('system.query_type')+(index+1)" style="margin-bottom: 0;">
+                <el-select v-model="item.FileType" style="width: 100%;">
+                  <el-option
+                    v-for="item in typeList"
+                    :key="item.Id"
+                    :label="item.Name"
+                    :value="item.Id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="$t('objFill.v101.lianjie')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.LinkUrl"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('hotel.hotel_describle')+(index+1)">
+                <el-input type="textarea"
+                :rows="2" v-model="item.SubDescribe"></el-input>
+              </el-form-item>
+            </td>
+            <td class="colAs">
+              <el-form-item :label="$t('objFill.v101.zhubiaoti')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.SubName"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('objFill.fubiaoti')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.SubEnName"></el-input>
+              </el-form-item>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+        clickIndex: 0, //点击图片索引
+        typeList: [
+          {Name: this.$t('system.label_img'),Id: 1},
+          {Name: this.$t('objFill.shipin'),Id: 2},
+        ],
+        clickType: 0,//1主菜单  2二级菜单
+        MenuList:{
+          FileType: 1,
+          FileUrl: '',
+          LinkUrl: '',
+          MenuName: '',
+          MenuSubName: '',
+        },
+        SubMenuList: {
+          FileType: 1,
+          FileUrl: '',
+          LinkUrl: '',
+          MenuName: '',
+          MenuSubName: '',
+          SubMenuList: null,
+        }
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      addMenu(type,index){
+        this.clickType = type
+        this.plugData.NavList.push(JSON.parse(JSON.stringify(this.MenuList)))
+      },
+      delMenu(type,index,i){
+        this.clickType = type
+        if(type==1){
+          this.plugData.NavList.splice(index,1)
+        }
+      },
+      //上传图片
+      UploadAttachment(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.NavList[this.clickIndex].FileUrl = imgUrl;
+        });
+      },
+      UploadAttachmentCover(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.CoverImg = imgUrl;
+        });
+      },
+    },
+    mounted() {}
+  };
+
+</script>

src/components/WebSet/home/indexSlider1.vue

+<style scoped>
+  .WebSite_slider .text-warning {
+    color: #8a6d3b;
+  }
+
+  .WebSite_slider .webSliderDiv {
+    width: 150px;
+    line-height: 0;
+    height: 100px;
+    overflow: hidden;
+    /* height: 234px; */
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .WebSite_slider .webSliderDiv .web_imgUrl {
+    width: 100%;
+    height: 100%;
+  }
+  .WebSite_slider .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .WebSite_slider .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+  /deep/.WebSite_slider .el-form-item__content{
+    line-height: 20px;
+  }
+  .caidantext{
+    font-size: 16px;
+    font-weight: bold;
+    color: #f45c43;
+  }
+  .caidantext.caidantext2{
+    color: dodgerblue;
+  }
+  .row{
+    display: flex;
+    flex-direction: row;
+  }
+  .rowSbAc{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .rowEnd{
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+  }
+  .colAs{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+  }
+  .flex{
+    flex: 1;
+  }
+  .flex-shrink{
+    flex: 1;
+    flex-shrink: 0;
+  }
+
+</style>
+<template>
+  <div class="WebSite_slider">
+    <el-form label-width="100px">
+      <!-- <el-row>
+        <el-col :span="24">
+          <el-form-item>
+            <p class="text-warning">※ {{$t('objFill.v101.wutuzbxians')}}</p>
+          </el-form-item>
+        </el-col>
+      </el-row> -->
+      <el-row class="row">
+        <el-form-item :label="$t('objFill.v101.zhubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
+          <el-input type="text" v-model="plugData.Title"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.fubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
+          <el-input type="text" v-model="plugData.SubTitle"></el-input>
+        </el-form-item>
+      </el-row>
+      <el-row style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
+        <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
+          <div class="webSliderDiv" style="width: 100px;height: 100px;">
+            <el-upload :http-request="UploadAttachmentCover" :multiple="true"
+              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+              <img v-if="plugData.CoverImg" :src="plugData.CoverImg" class="web_imgUrl" alt="" />
+              <div class="addIconDiv">
+                <i class="web_addImg iconfont icon-img_haha"></i>
+                <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="plugData.CoverImg=''"></i>
+              </div>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.v101.jianjie')" class="flex" style="margin-bottom: 0;">
+          <el-input type="textarea"
+          :rows="2" v-model="plugData.Describe"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('objFill.v101.beijinse')" style="margin-bottom: 0;flex-shrink: 0;">
+          <el-color-picker style='vertical-align: middle;' v-model="plugData.BgColor"></el-color-picker>
+        </el-form-item>
+      </el-row>
+      <table>
+        <tbody v-for="(item,index) in plugData.NavList" :key="index">
+          <tr>
+            <td class="caidantext">
+              {{$t('objFill.caidan')}}{{index+1}}:
+            </td>
+            <td></td>
+            <td class="rowEnd">
+              <div>
+                <el-tooltip class="item" effect="dark" :content="'+ '+$t('objFill.caidan')" placement="top">
+                  <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu(1)"></el-button>
+                </el-tooltip>
+                <el-tooltip v-show="plugData.NavList.length>1" class="item" effect="dark" :content="'- '+$t('objFill.caidan')" placement="top">
+                  <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(1,index)"></el-button>
+                </el-tooltip>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="w350">
+              <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
+                <div class="webSliderDiv" @click="clickIndex=index">
+                  <el-upload v-if="item.FileType==1" :http-request="UploadAttachment" :multiple="true"
+                    accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+                    <img v-if="item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt="" />
+                    <div class="addIconDiv">
+                      <i class="web_addImg iconfont icon-img_haha"></i>
+                      <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.FileUrl=''"></i>
+                    </div>
+                  </el-upload>
+                  <el-upload v-if="item.FileType==2" :http-request="UploadAttachment" :multiple="true"
+                    accept="video/mp4,video/webm" :show-file-list="false" action="">
+                    <video v-if="item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt=""></video>
+                    <div class="addIconDiv">
+                      <i class="web_addImg iconfont icon-img_haha"></i>
+                      <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.FileUrl=''"></i>
+                    </div>
+                  </el-upload>
+                </div>
+                <div v-if="plugData.Type==1">{{$t('objFill.v101.tupiqscsqin')}}</div>
+                <div v-else>{{$t('objFill.v101.tupiqscersw')}}</div>
+              </el-form-item>
+            </td>
+            <td class="flex">
+              <el-form-item :label="$t('objFill.v101.fengmian')+$t('system.query_type')+(index+1)" style="margin-bottom: 0;">
+                <el-select v-model="item.FileType" style="width: 100%;">
+                  <el-option
+                    v-for="item in typeList"
+                    :key="item.Id"
+                    :label="item.Name"
+                    :value="item.Id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="$t('objFill.v101.lianjie')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.LinkUrl"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('hotel.hotel_describle')+(index+1)">
+                <el-input type="textarea"
+                :rows="2" v-model="item.SubDescribe"></el-input>
+              </el-form-item>
+            </td>
+            <td class="colAs">
+              <el-form-item :label="$t('objFill.v101.zhubiaoti')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.SubName"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('objFill.fubiaoti')+(index+1)" style="margin-bottom: 0;">
+                <el-input type="text" v-model="item.SubEnName"></el-input>
+              </el-form-item>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+        clickIndex: 0, //点击图片索引
+        typeList: [
+          {Name: this.$t('system.label_img'),Id: 1},
+          {Name: this.$t('objFill.shipin'),Id: 2},
+        ],
+        clickType: 0,//1主菜单  2二级菜单
+        MenuList:{
+          FileType: 1,
+          FileUrl: '',
+          LinkUrl: '',
+          MenuName: '',
+          MenuSubName: '',
+        },
+        SubMenuList: {
+          FileType: 1,
+          FileUrl: '',
+          LinkUrl: '',
+          MenuName: '',
+          MenuSubName: '',
+          SubMenuList: null,
+        }
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      addMenu(type,index){
+        this.clickType = type
+        this.plugData.NavList.push(JSON.parse(JSON.stringify(this.MenuList)))
+      },
+      delMenu(type,index,i){
+        this.clickType = type
+        if(type==1){
+          this.plugData.NavList.splice(index,1)
+        }
+      },
+      //上传图片
+      UploadAttachment(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.NavList[this.clickIndex].FileUrl = imgUrl;
+        });
+      },
+      UploadAttachmentCover(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.CoverImg = imgUrl;
+        });
+      },
+    },
+    mounted() {}
+  };
+
+</script>