联系我们模块更新

src/api/site/site.js

     })
 }
 
+
+export function addrotationpic(data){
+   return request({
+       url:"/api/site/addrotationpic",
+       method:"Post",
+       data:data,
+   })
+}
+
+export function GetRotationImages(params){
+    return request({
+        url:"/api/site/getrotationimages",
+        method:"Post",
+        params:params
+    })
+}
+
+export function addrotationImage(data){
+    return request({
+        url:"/api/site/addrotationimage",
+        method:"Post",
+        data:data,
+    })
+}
+
+export function AddImageslink(data){
+   return request({
+       url:"/api/site/addimageslink",
+       method:"Post",
+       data:data,
+   })
+}
+
+export function getEditImages(params){
+    return request({
+        url:"/api/site/geteditimages",
+        method:"Post",
+        params:params
+    })
+}
+
+export function AddMagicNavi(data){
+   return request({
+       url:"/api/site/addmagicnavi",
+       method:"Post",
+       data:data,
+   })
+}
+
+export function getMagicImages(params){
+   return request({
+      url:"/api/site/getmagicimages",
+      method:"Post",
+      params:params,
+   })
+}
+
+export function AddMarginChart(data){
+   return request({
+      url:"/api/site/addmarginchart",
+      method:"Post",
+      data:data,
+   })
+}
+

src/scrm_pages/site/components/add-contact.vue

                 </li>
             </ul>
          </div>
-
-<!-- 轮播图 -->
-<el-dialog
+  <!-- 新增轮播图 -->
+   <el-dialog
     title="新增轮播图"
     :visible.sync="slideshow"
     width="550px"
-    >
-    <el-form ref="rotationform" :model="rotationform" label-width="90px" :rules="rules" :label-position="labelPosition">
-      <el-form-item label="模块标题:" required prop="title">      
-        <el-input v-model="rotationform.title" ></el-input>
+     center>
+    <el-form ref="rotationform" :model="rotationform" label-width="90px" :rules="rules" >
+      <el-form-item label="模块标题:" required prop="title">
+        <el-input v-model="rotationform.title"></el-input>
       </el-form-item>
       <el-form-item label="排序值:" required prop="sort">
         <el-input v-model="rotationform.sort"></el-input>
         <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
       </el-form-item>
-      <el-form-item label="添加图片:" v-model="rotationform.rotationImages" required prop="rotationImages">
-         <el-upload
-          :data="rotationData"
-          action="https://upload.qiniup.com"
-          list-type="picture-card"
-          :on-success="RotationchartSuccess"
-         :before-upload="beforeRotationUpload"
-         >
-        <i slot="default" class="el-icon-plus"></i>
-        <div slot="file" slot-scope="{file}">
-          <img
-           class="el-upload-list__item-thumbnail"
-           :src="file.url"
-          >
-        <span class="el-upload-list__item-actions"> 
-         <span
-           v-if="!disabled"
-           class="el-upload-list__item-delete"
-         >
-         <i class="el-icon-edit-outline" @click="rotationEditImages('rotationform')"></i>
-          </span> 
-         <span
-           v-if="!disabled"
-           class="el-upload-list__item-delete"
-         >
-          <i class="el-icon-delete"></i>
-          </span> 
-         </span> 
-        </div> 
-     </el-upload>
+     <el-form-item label="添加图片:" v-model="rotationform.rotationImages">
+         <div class="flex-img">
+              <div class="el-upload-list el-upload-list--picture-card" >            
+                  <div class="el-upload-list__item is-success" v-for="(item,index) in this.rotationdata" :key="item.id">             
+                    <img class="flex-img__image" :src="item.images">              
+                    <label class="el-upload-list__item-status-label">
+                     <i class="el-icon-upload-success el-icon-check"></i>
+                    </label>
+                     <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-delete">
+                    <i class="el-icon-edit-outline" @click="editImages(item.id);editcenterDialogVisible = true"></i>
+                    <i class="el-icon-delete" @click="deleteDoctor(item.id,index)"></i>
+                    </span>
+                    </span>
+                   </div>         
+                </div>     
+                <img src="static/images/u679.png" @click="addVisible = true">   
+             </div>
+              <!-- <div class="addrot">
+
+              </div> -->
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="slideshow = false">取 消</el-button>
-      <el-button type="primary" @click="addRotationUpload('rotationform');">确 定</el-button>
+      <el-button type="primary" @click="addrotationImage('rotationform')">确 定</el-button>
     </span>
   </el-dialog>
 
+
   <!-- 医院地址 -->
   <el-dialog
     title="新增医院地址"
       <el-button type="primary" @click="addRideWay('rideform');">确 定</el-button>
     </span>
    </el-dialog>
+
+ <!-- 编辑图片 -->
+ <el-dialog
+     class="avatar-uploader"
+     title="编辑图片"
+     :visible.sync="addVisible"
+     width="35%"
+     center>
+  <el-form ref="picform" :model="picform" label-width="90px" :rules="rules">
+    <el-form-item label="图片编辑:" required prop="Images">
+      <el-col :span="5">       
+       <el-upload
+          :data="Data"        
+          action="https://upload.qiniup.com"
+          :show-file-list="false"
+          :on-success="RotationSuccess"
+          :before-upload="RotationUpload">
+          <img v-if="picform.Images" :src="picform.Images" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+      </el-upload>
+      </el-col>
+      <el-col :span="19">
+          <div class="tpic" v-show="showpic"> 
+            <img :src="picform.Images" style="width:200px;height:100px">
+          </div>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="排序值:" required prop="sort">
+       <el-col :span="24">
+         <el-input v-model="picform.sort"></el-input>
+       </el-col>   
+    </el-form-item>
+    <el-form-item label="图片链接:" required prop="piclink">
+        <el-radio-group v-model="picform.piclink">
+           <el-radio :label="gender.id" :value="gender.id" v-for="(gender, index) in genderOptions" :key="index" @change="selectGender(gender.id)">{{gender.name}}</el-radio>
+        </el-radio-group>
+    </el-form-item>
+    <el-form-item label="链接地址:" required prop="linkaddress">
+      <el-col :span="20">
+      <el-input v-model="picform.linkaddress"></el-input>
+      </el-col>
+      <el-col :span="4">
+       <el-button size="medium" @click="addlink()">设置链接</el-button>
+      </el-col>
+    </el-form-item>
+  </el-form>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="addVisible = false">取 消</el-button>
+    <el-button type="primary" @click="addrotationpic('picform');addVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+
   </div>
 </template>
 
 <script>
  import { getToken } from '@/api/qiniu'
  import { getFileExtension} from '@/utils/tools'
- import { addRotationUpload,addRideWay,addWorkTime,addconnection,queryConnetion,deleteConnecWay,editConnecWay,saveConnecform,addContract} from '@/api/site/site'  
+ import { addRotationUpload,addRideWay,addWorkTime,addconnection,queryConnetion,deleteConnecWay,editConnecWay,
+ saveConnecform,addContract,addrotationpic,GetRotationImages,addrotationImage} from '@/api/site/site'  
 import { truncateSync } from 'fs';
 export default {
   name: "addcontact",
   data() {
     return {
+      show:false,
+      imageUrl:false,
       dialogshow:false,
       slideshow:false,
       address:false,
       dialogFormVisibleAdd:true,
       labelPosition: 'left',
       qiniuDomain: 'https://images.shengws.com/',
+      Data: { token:'',key: '' },
       rotationData: { token:'',key: '' },
       new1: require("../../../assets/preview/u481.png"),
       new2: require("../../../assets/preview/u493.png"),
         sort:"",
         rotationImages:[],
       },
+      rotationdata:[],
       rideform:{
         title:"",
         sort:"",
         rotationImages:[{required:true,message:"请填写添加图片"}],
         content:[{required:true,message:"请填写乘车方式"}],
         worktime:[{required:true,message:"请填写工作时间"}],
-        connecway:[{required:true,message:"请选择联系方式"}]
+        connecway:[{required:true,message:"请选择联系方式"}],
+        linkaddress:[{required:true,message:"请填写链接地址"}]
       },
-
+     addVisible:false,  
+       picform:{
+         sort:"",
+         Images:"",
+         piclink:"",
+         linkaddress:"",
+      },
+      showpic:false,
+      genderOptions:[
+        {id:1, name:'无'},
+        {id:2, name:'自定义'},
+       ],
     };
   },
   methods:{
+    
        //轮播图
       RotationchartSuccess(res,file,filelist){         
          this.rotationform.rotationImages.push(this.qiniuDomain + res.url);  
             })
           return isJPG && isLt2M;
       },
+
+       RotationSuccess(res,file,filelist){         
+         this.picform.Images =this.qiniuDomain + res.url;
+         this.showpic = true;
+      },
+         RotationUpload(file){
+             var fileType = file.type
+            const isJPG = fileType.indexOf("image") > -1;
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isJPG) {
+                this.$message.error("只能上传图片");
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error("图片大小不能超过 2MB!");
+                return false;
+         }
+      
+         var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token= response.data.data.uptoken
+                    console.log("联系我们轮播图token是什么?",token)
+                    _self._data.Data.token = token;
+                    _self._data.Data.key = key;
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                })
+            })
+          return isJPG && isLt2M;
+      },
       //添加轮播图
       addRotationUpload(formName){
         this.$refs[formName].validate((valid)=>{
             addconnection(this.connecform).then(response=>{
               if(response.data.state==1){
                  var cooection =  response.data.data.connection;
-                 console.log("返回数据",cooection);
+                //  console.log("返回数据",cooection);
                  this.queryConnetion();
                  this.connecform.title = "";
                  this.connecform.content = "";
         queryConnetion().then(response=>{
            if(response.data.state ==1){
              this.connectionway = response.data.data.conection;
-             console.log("联系方式返回数据",this.connectionway);
+            //  console.log("联系方式返回数据",this.connectionway);
            }
         })
       },
         editConnecWay(id).then(response=>{
             if(response.data.state == 1){
               this.editconnecform = response.data.data.connection;
-              console.log("返回数据",this.connecform);
+              // console.log("返回数据",this.connecform);
             }
         })      
       },
               saveConnecform(this.editconnecform.id,this.editconnecform).then(response=>{
                   if(response.data.state == 1){
                      var connection =  response.data.data.connection;
-                     console.log("返回数据",connection);
+                    //  console.log("返回数据",connection);
                       this.editLink =false;
                       this.queryConnetion();
                   }    
                   if(response.data.state == 1){
                    var connectway = response.data.data.connectway;
                    var ordmodel = response.data.data.ordmodel;
-                   console.log("返回数据",connectway);
-                   console.log("返回数据",ordmodel)    
+                  //  console.log("返回数据",connectway);
+                  //  console.log("返回数据",ordmodel)    
                   }
               })           
             }
                   if(response.data.state==1){
                     var ordmodel = response.data.data.ordmodel;
                     var patientWorktime = response.data.data.patientWorktime
-                    console.log("返回数据",ordmodel);
-                    console.log("返回数据",patientWorktime)
+                    // console.log("返回数据",ordmodel);
+                    // console.log("返回数据",patientWorktime)
                     this.time = false;
                 }
             })
             addRideWay(this.rideform).then(response=>{
               if(response.data.state==1){
                  var rideway = response.data.data.rideway;
-                 console.log("返回数据",rideway);
+                //  console.log("返回数据",rideway);
                  var ordemodel = response.data.data.ordemodel;
-                 console.log("返回数据",ordemodel)
+                //  console.log("返回数据",ordemodel)
                  this.type = false;
               }
             })
       },
       hospitaAddress(){
         this.hostaddress = true;
+      },
+      addrotationpic(formName){
+         var sorts = this.picform.sort
+         var sort = parseInt(sorts)
+         this.picform.sort = sort
+       this.$refs[formName].validate((valid)=>{
+         if(valid){
+            addrotationpic(this.picform).then(response=>{
+               if(response.data.state ==1){
+                 var conrotation  = response.data.data.conrotation;
+                //  console.log("返回数据",conrotation)
+               }
+            })
+         }
+       })  
+      },
+      GetRotationImages(){
+        GetRotationImages(this.picform.id).then(response=>{
+           if(response.data.state == 1){
+             var conrotations =   response.data.data.conrotations
+             this.rotationdata =   response.data.data.conrotations
+            
+           }
+        })
+      },
+      addrotationImage(formName){
+        var sorts =  this.rotationform.sort;
+        var sort = parseInt(sorts);
+        this.rotationform.sort = sort;
+        for (let index = 0; index < this.rotationdata.length; index++) {
+          this.rotationform.rotationImages.push(this.rotationdata[index].images);       
+        }
+        this.$refs[formName].validate((valid)=>{
+          if(valid){
+            addrotationImage(this.rotationform).then(response=>{
+                 if(response.data.state == 1){
+                   var oldrotation  = response.data.data.oldrotation;
+                   this.slideshow = false;
+                 
+                 } 
+            })
+          }
+        })
       }
   },
        mounted(){
         
         created(){
           this.queryConnetion();
+          this.GetRotationImages();
         },
 
-          updated(){
+       updated(){
           this.$nextTick(function () {
                 var th = this
                 // 创建Map实例
         margin-top: 20px;
       //  border:1px solid green;
     }
-.tips {
-  font-size: 12px;
-  line-height: 18px;
-}
+  .tips {
+    font-size: 12px;
+    line-height: 18px;
+   }
 .used {
   ul {
     li {
       }
     }
   }
+  
+   .avatar-uploader{
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      width: 100px;
+      height: 100px;
+     }
+  .avatar-uploader{
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 14px;
+    color: #8c939d;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    margin-left: 25px;
+    margin-top: 25px;
+    text-align: center;
+  }
+
+   .tpic{
+     width:200px;
+     height:200px;
+     border:solid 1px red;
+   }
+
+  //  .addrot{
+  //    width: 146px;
+  //    height: 146px;
+  //    border: dashed 1px red;
+  //  }
+  
 }
 </style>

src/scrm_pages/site/components/contact-us.vue

 <template>
     <div>
-        <!-- <div class="us">
-          <img src="static/images/d.jpg">
-        </div>
-        <div class="hosname">
-           <span>北京大学深圳医院</span>
-        </div>
-        <div class="hosaddress">
-            地址:广东省深圳市福田莲花路1120号北京大学深圳医院三楼
-        </div>
-        <div class="hosphone">
-           总部电话：0755-83923333
-        </div>
-        <div class="hosphone">
-            预约电话：0755-83923333
-        </div>
-        <div class="hosphone">
-            微信号:13318464642
-        </div>
-        <div class="hosphone">
-            办公时间:周一至周五，上午8:00-12:00，下午2:00-5:00.其他时间请联系医院值班电话
-        </div>
-        <div class="hostake">
-            乘车指南:11路空调; 12路空调; 14路; 59路空调; 71路空调; 79路; 104路空调; 209路空调; 213路空调; 323路空调; 365路空调;m358路空调;n13路空调;n6路空调; 购物线
-        </div> -->
-        <!-- :class="sstt[index]" -->
         <div  v-for="item in this.ordmodel" :key="item.id">
            <div>
               <div v-if="item.mode_type == 1">
-                 <div class="rotation">
-
+                 <div class="modefive">
+                     <img src="static/images/a.jpg" style="width:315px;height:200px">
                  </div>
               </div>
                 <div class="modelone" v-if="item.mode_type == 2">
                  <div>
-
+                    
                  </div>
               </div>
               <div  v-if="item.mode_type == 3">
                  <div class="modeone">
-                   <span>{{item.title}}:13318464642</span><br>
-                   <span>{{item.title}}:13318464642</span><br>
-                   <span>{{item.title}}:13318464642</span><br>
+                   <span>{{item.title}}:&nbsp;&nbsp;13318464642</span><br>
+                   <span>{{item.title}}:&nbsp;&nbsp;13318464642</span><br>
+                   <span>{{item.title}}:&nbsp;&nbsp;13318464642</span><br>
                   </div>
               </div>
                <div class="modetwo" v-if="item.mode_type == 4">
                  if(response.data.state == 1){
                   var ordmodel = response.data.data.ordmodel;
                   this.ordmodel = response.data.data.ordmodel;
+        
+                  for (let index = 0; index < this.ordmodel.length; index++) {
+                    var images = this.ordmodel[index].Oldration.rotation_images;     
+                    console.log("images是什么?",images)              
+                  }
+                  console.log(images)
                   console.log("马文强",ordmodel)
                  }
              })
     margin-bottom: 10px;
   }
 
+  .modefive{
+    width:315px;
+    height: 200px;
+    /* border: solid 1px red; */
+    margin-bottom: 5px;
+  }
+
   .rotation{
     width: 320px;
     height: 220px;

src/scrm_pages/site/components/doctor-introduction.vue

-<template>
-    <div class="wq5">                         
-       <img src="static\images\u.png" style="width:5px;height:20px;">                           
-        <div class="kefont"><span >名医介绍</span></div>
-        <div class="more" @click="more()">查看更多</div>
-        <div class="logo"><img src="static\images\u216.png"></div>
-        <div class="famdoc" v-for="item in doctorInfos" :key="item.id">
-        <div class="dochead">
-        <img :src="item.dochead" style="width:100px;height:100px">
-        </div>
-        <div class="docname">
-        <span  class="zzcontent">{{item.docname}}</span>
-         </div>
-        <div class="docintroduction"><span  class="zzcontent" v-html="item.docintroduction"></span></div>
-       </div>
-    </div>  
-</template>
-
-<script>
-    export default {
-        name: "doctor-introduction",
-        data(){
-           return{
-              doctorInfos:[],  
-           } 
-        },
-        methods:{}
-    }
-</script>
-
-<style scoped>
-    .wq5{
-        width: 320px;
-        height: 290px;
-        /* background-color: rgba(242, 242, 242, 1); */
-        color: #ffffff;
-        /* border: solid 1px black; */
-     }
-    
-     .kefont{
-       font-size: 14px;
-       color: red;
-       margin-left: 8px;
-       margin-top: -20px;
-    }
-
-    .more{
-       position: absolute;
-       font-size: 14px;
-       color:black;
-       margin-left: 220px;
-       margin-top: -22px;
-     }
-
-    .logo{
-       position: absolute;
-       margin-left: 280px;
-       margin-top: -22px;
-     }
-     .content{
-       position: absolute;
-       font-size: 14px;
-       color: black;
-     }
-
-     
-     .famdoc{
-       position: relative;
-       width: 320px;
-       height: 130px;
-       background-color: rgba(242, 242, 242, 1);
-     }
-
-     .dochead{
-       width:100px;
-       height: 100px;
-     /* //  border:solid 1px green; */
-       margin-top: 10px;
-       margin-left: 10px;
-     }
-
-     .docname{
-       position: absolute;
-       width:50px;
-       height: 20px;
-      /* // border: solid 1px green; */
-       margin-left: 130px;
-       margin-top: -90px;
-       font-size: 14px;
-       color:black;
-     }
-    .zzcontent{
-     overflow: hidden;
-     text-overflow: ellipsis;
-     display: -webkit-box;
-     -webkit-line-clamp: 3;
-     -webkit-box-orient: vertical   
-   }   
-     .docintroduction{
-       position: absolute;
-       width: 150px;
-       height: 50px;
-      /* // border: solid 1px green; */
-       margin-left: 130px;
-       margin-top: -60px;
-       font-size: 14px;
-       color: black;
-     }
-</style>

src/scrm_pages/site/components/hospital-introduction.vue

-<template>
-    <div class="wq3">                         
-      <img src="static\images\u.png" style="width:5px;height:20px;">                           
-      <div class="kefont"><span >医院介绍</span></div>
-      <div class="more" @click="more()">查看更多</div>
-      <div class="logo"><img src="static\images\u216.png"></div>
-      <div class="content">
-        <span v-html="hispitalform.introduction" id="content" class="yycontent"></span>
-       </div>    
-    </div>
-</template>
-
-<script>
-     import { GetHospitalInfo } from '@/api/site/site'
-    export default {
-        name: "hospital-introduction",
-        data(){
-          return{
-            hispitalform:{
-             title:"",
-             sort:"",
-             introduction:"",
-            },
-          }
-        },
-        methods:{
-             //获取医院介绍
-            GetHospitalInfo(){
-              GetHospitalInfo().then(response=>{
-               if(response.data.state == 1){
-                var hospital =  response.data.data.hospital;
-               this.hispitalform =  response.data.data.hospital;
-             // console.log("获取医院介绍数据",hospital);
-             }
-           })
-          },
-        },
-        created(){
-           this.GetHospitalInfo(); 
-        },
-         updated(){
-            let obj = document.getElementById('content');
-            console.log("obj是什么",obj)
-            let imgs =  obj.getElementsByTagName('img');
-            console.log("imgs",imgs)
-            for(let i=0;i<imgs.length;i++){
-            imgs[i].style.width = '332px';
-            imgs[i].style.height = '100px';
-         }
-       }
-    }
-</script>
-
-<style scoped>
-   
-     .wq3{
-        width: 320px;
-        height: 230px;
-        background-color: white;
-        color: #ffffff;
-      /* border: solid 1px black; */
-        margin-bottom: 0px;
-     }
-
-    .kefont{
-       font-size: 14px;
-       color: red;
-       margin-left: 8px;
-       margin-top: -20px;
-     }
-
-     .more{
-       position: absolute;
-       font-size: 14px;
-       color:black;
-       margin-left: 220px;
-       margin-top: -22px;
-     }
-
-    .logo{
-       position: absolute;
-       margin-left: 280px;
-       margin-top: -22px;
-     }
-
-      .content{
-       position: absolute;
-       font-size: 14px;
-       color: black;
-     }
-
-     .yycontent{
-     overflow: hidden;
-     text-overflow: ellipsis;
-     display: -webkit-box;
-     -webkit-line-clamp: 6;
-     -webkit-box-orient: vertical   
-   }
-</style>

src/scrm_pages/site/components/new-feature.vue

   <el-dialog
     title="新增轮播图"
     :visible.sync="dialogVisible"
-    width="550px"
-    :before-close="handleClose">
+    width="35%"
+    :before-close="handleClose"
+    center>
     <el-form ref="rotationform" :model="rotationform" label-width="90px" :rules="rules" >
       <el-form-item label="模块标题:" required prop="title">
         <el-input v-model="rotationform.title"></el-input>
         <el-input v-model="rotationform.sort"></el-input>
         <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
       </el-form-item>
-      <el-form-item label="添加图片:" v-model="rotationform.rotationImages" required prop="rotationImages">
-        <div>
-        </div>
-         <el-upload
-          :data="rotationData"
-          action="https://upload.qiniup.com"
-          list-type="picture-card"
-         :on-success="RotationchartSuccess"
-         :before-upload="beforeRotationUpload"
-         v-show="show">
-        <i slot="default" class="el-icon-plus"></i>
-        <div slot="file" slot-scope="{file}">
-          <img
-           class="el-upload-list__item-thumbnail"
-           :src="file.url"
-          >
-        <span class="el-upload-list__item-actions"> 
-         <span
-           v-if="!disabled"
-           class="el-upload-list__item-delete"
-         >
-         <i class="el-icon-edit-outline" @click="rotationEditImages()"></i>
-          </span> 
-         <span
-           v-if="!disabled"
-           class="el-upload-list__item-delete"
-         >
-          <i class="el-icon-delete"></i>
-          </span> 
-         </span> 
-        </div> 
-     </el-upload>
-      <img  src="static/images/u679.png" @click="addpic()">
+        <el-form-item label="添加图片:" v-model="rotationform.rotationImages">
+         <div class="flex-img">
+              <div class="el-upload-list el-upload-list--picture-card" >            
+                  <div class="el-upload-list__item is-success" v-for="(item,index) in this.rotationdata" :key="item.id">             
+                    <img class="flex-img__image" :src="item.images">              
+                    <label class="el-upload-list__item-status-label">
+                     <i class="el-icon-upload-success el-icon-check"></i>
+                    </label>
+                     <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-delete">
+                    <i class="el-icon-edit-outline" @click="editImages(item.id);editcenterDialogVisible = true"></i>
+                    <i class="el-icon-delete" @click="deleteDoctor(item.id,index)"></i>
+                    </span>
+                    </span>
+                   </div>         
+                </div>     
+                <div class="addrot" @click="addpicVisible = true">
+                   <div class="addrotone">
+                     <i class="el-icon-plus"></i>
+                   </div>  
+                   <div class="addrotwo">
+                     <span>新增图片</span>
+                   </div>
+                </div>
+             </div>
       </el-form-item>
-       
-       <span class="uploadfont">图片已上传0张,最多上传9张图片</span>
+       <!-- <span class="uploadfont">图片已上传0张,最多上传9张图片</span> -->
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
    <el-dialog
      title="编辑图片"
      :visible.sync="addpicVisible"
-     width="30%"
-    >
-  <el-form ref="picform" :model="picform" label-width="90px">
-    <el-form-item label="图片编辑:">
+     width="35%"
+     center>
+  <el-form ref="picform" :model="picform" label-width="90px" :rules="rules">
+    <el-form-item label="图片编辑:" required prop="imageUrl">
       <el-col :span="5">
        <el-upload
-         :data="rotationData"
+         :data="imageData"
          class="avatar-uploader"
          action="https://upload.qiniup.com"
         :show-file-list="false"
-         :on-success="RotationchartSuccess"
-        :before-upload="beforeRotationUpload">
-        <img v-if="imageUrl" :src="imageUrl" class="avatar">
+         :on-success="rotationSuccess"
+        :before-upload="rotationUpload">
+        <img v-if="picform.imageUrl" :src="picform.imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
       </el-col>
-      <el-col :span="19">
+      <!-- <el-col :span="19">
           <div class="tpic"> 
-            <img src="static/images/a.jpg">
+            <img src="static/images/a.jpg" style="width:250px;height:150px">
           </div>
-      </el-col>
+      </el-col> -->
     </el-form-item>
-    <el-form-item label="排序值:">
+    <el-form-item label="排序值:" required prop="sort">
        <el-col :span="24">
-         <el-input></el-input>
+         <el-input v-model="picform.sort" style="width:410px"></el-input>
        </el-col>   
     </el-form-item>
-    <el-form-item label="图片链接:">
-      <el-radio v-model="radio" label="1">无</el-radio>
-      <el-radio v-model="radio" label="2">自定义</el-radio> 
+    <el-form-item label="图片链接:" required prop="imagelink">
+        <el-radio-group v-model="picform.imagelink">
+          <el-radio :label="gender.id" :value="gender.id" v-for="(gender, index) in genderOptions" :key="index" @change="select(gender.id)">{{gender.name}}</el-radio>
+        </el-radio-group>
     </el-form-item>
-    <el-form-item label="链接地址:">
-      <el-col :span="20">
-      <el-input></el-input>
+    <el-form-item label="链接地址:" required prop="linkaddress">
+      <el-col :span="15">
+      <el-input v-model="picform.linkaddress" v-show="selectone" style="width:300px"></el-input>
       </el-col>
       <el-col :span="4">
-       <el-button size="medium" @click="addlink()">设置链接</el-button>
+       <el-button size="medium" @click="addlink()" v-show="selectone">设置链接</el-button>
       </el-col>
     </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button @click="addpicVisible = false">取 消</el-button>
-    <el-button type="primary" @click="addpicVisible = false">确 定</el-button>
+    <el-button type="primary" @click="AddImageslink('picform');addpicVisible = false">确 定</el-button>
   </span>
 </el-dialog>
   
          </el-select>
        </el-form-item>
        <el-form-item >
-        <el-input style="width: 300px"  placeholder="请输入您需要搜索的内容"></el-input>
-          <el-button type="primary"  icon="el-icon-search">搜索</el-button>
        </el-form-item>
        <el-form-item label="自定义地址:">
-          <el-input></el-input>
+          <el-input style="width:350px"></el-input>
        </el-form-item>
      </el-form>
     <span slot="footer" class="dialog-footer">
             </div>         
         </div>        
     </div>
-      <img src="static/images/u646.png" @click="centerDialogVisible = true">
+      <!-- <img src="static/images/u646.png" @click="centerDialogVisible = true"> -->
+      <div class="doc" @click="centerDialogVisible = true">
+         <div class="docone">
+         <li class="el-icon-plus"></li>  
+         </div>
+         <div class="doctwo">
+            <span>新增名医</span>
+         </div>
+      </div>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
     </span>
   </el-dialog>
   <!-- 新增魔方导航 -->
-
     <el-dialog
     title="新增魔方导航"
     :visible.sync="eight"
-    width="550px">
+    width="550px"
+    center>
     <el-form ref="marginform" :model="marginform" label-width="90px" :rules="rules" >
       <el-form-item label="模块标题:" required prop="title">
         <el-input v-model="marginform.title"></el-input>
         <el-input v-model="marginform.sort"></el-input>
         <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
       </el-form-item>
-      <el-form-item label="添加图片:" v-model="marginform.marginImages" required prop="marginImages">
-        <div>
-        </div>
-         <el-upload
-          :data="rotationData"
-          action="https://upload.qiniup.com"
-          list-type="picture-card"
-         :on-success="RotationchartSuccess"
-         :before-upload="beforeRotationUpload"
-         v-show="show">
-        <i slot="default" class="el-icon-plus"></i>
-        <div slot="file" slot-scope="{file}">
-          <img
-           class="el-upload-list__item-thumbnail"
-           :src="file.url"
-          >
-        <span class="el-upload-list__item-actions"> 
-         <span
-           v-if="!disabled"
-           class="el-upload-list__item-delete"
-         >
-         <i class="el-icon-edit-outline" @click="rotationEditImages()"></i>
-          </span> 
-         <span
-           v-if="!disabled"
-           class="el-upload-list__item-delete"
-         >
-          <i class="el-icon-delete"></i>
-          </span> 
-         </span> 
-        </div> 
-     </el-upload>
-      <img  src="static/images/u999.png" @click="addmagin()">
+       <el-form-item label="添加图片:" v-model="marginform.marginImages" required prop="marginImages">
+         <div class="flex-img">
+              <div class="el-upload-list el-upload-list--picture-card" v-for="item in margindata" :key="item.id">            
+                  <div class="el-upload-list__item is-success">             
+                    <img class="flex-img__image" :src="item.margimage">              
+                    <label class="el-upload-list__item-status-label">
+                     <i class="el-icon-upload-success el-icon-check"></i>
+                    </label>
+                     <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-delete">
+                    <i class="el-icon-edit-outline" @click="editImages(item.id);editcenterDialogVisible = true"></i>
+                    <i class="el-icon-delete" @click="deleteDoctor(item.id,index)"></i>
+                    </span>
+                    </span>
+                   </div>         
+                </div>     
+                <div class="upic" @click="MagicNavigation = true">
+                  <div class="icon">
+                     <i class="el-icon-plus"></i>
+                  </div>
+                  <div class="ufont">
+                      <span>新增导航</span>
+                  </div>
+                </div>
+         </div>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="eight = false">取 消</el-button>
-      <el-button type="primary" @click="AddRotationChart('rotationform')">确 定</el-button>
+      <el-button type="primary" @click="AddMarginChart('marginform');">确 定</el-button>
     </span>
   </el-dialog>
  
    <el-dialog
      title="编辑魔法导航"
      :visible.sync="MagicNavigation"
-     width="40%"
+     width="35%"
      center>
      <el-form  label-width="90px"  ref="editmarginform" :model="editmarginform" :rules="rules">
-       <el-form-item label="导航标题:" prop="title">
+       <el-form-item label="导航标题:" required prop="margtitle">
          <el-input style="width:400px" v-model="editmarginform.margtitle"></el-input>
        </el-form-item>
-       <el-form-item label="导航图标:" prop="margimage">
+       <el-form-item label="导航图标:" required prop="margImage" >
        <el-upload
          class="avatar-uploader"
           :data="magicData"
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
-       <el-form-item label="跳转设置">
-         <el-radio-group v-model="form.gender">
+       <el-form-item label="跳转设置" required prop="jumpset">
+         <el-radio-group v-model="editmarginform.jumpset">
             <el-radio :label="gender.id" :value="gender.id" v-for="(gender, index) in genderOptions" :key="index" @change="selectGender(gender.id)">{{gender.name}}</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item>
-         <el-col :span="12" v-mode="editmarginform.marginaddress">
-          <el-input style="width:300px" v-show="define"></el-input>
+         <el-col :span="15">
+           <el-input style="width:300px" v-model="editmarginform.marginaddress" v-show="define"></el-input>
         </el-col>
         <el-col :span="4">
          <el-button size="medium" @click="setlink()" v-show="define">设置链接</el-button>
      </el-form>
     <span slot="footer" class="dialog-footer">
     <el-button @click="MagicNavigation = false">取 消</el-button>
-    <el-button type="primary" @click="MagicNavigation = false">确 定</el-button>
+    <el-button type="primary" @click="AddMagicNavi('editmarginform');MagicNavigation = false">确 定</el-button>
   </span>
 </el-dialog> 
 
 </template>
 
 <script>
-   import { AddRotationChart, saveHispital,addOffices,AddDoctor,AddDoctorInfo,AddOfficeEnvironment,getQueryDocInfo,change,getQueryDoCHead,editDoctor,saveDocInfo,deleteDoctor } from '@/api/site/site'  
+   import { AddRotationChart, saveHispital,addOffices,AddDoctor,AddDoctorInfo,AddOfficeEnvironment,getQueryDocInfo,change,
+   getQueryDoCHead,editDoctor,saveDocInfo,deleteDoctor,AddImageslink,getEditImages,AddMagicNavi,getMagicImages,AddMarginChart} from '@/api/site/site'  
    import { getToken } from '@/api/qiniu'
    import { getFileExtension} from '@/utils/tools'
    import { isIP } from 'net';
    import 'quill/dist/quill.bubble.css'
    import { constants } from 'crypto';
 import { fail } from 'assert';
+import { get } from 'http';
 export default {
   name: "newfeature",
   components:{
        definetwo:false,
        definethree:false,
        definefour:false,
+       selectone:true,
        docnames:[],
        radio: '1',
        radiotwo:'2',
       rotationData: { token:'',key: '' },
       magicData:{ token:'',key:''},
       keData: { token: '' ,key: ''},
+      imageData: { token:'',key: ''},
       file: this.image ? this.image : '',
       hideShow:false,
       show:false,
       centerDialogVisible:false,
+      rotationdata:[],
+      margindata:[],
       filelist:[],
       radio:3,
       form: {
         margtitle:"",
         margImage:"",
         marginaddress:"",
+        jumpset:"",
       },
       keform:{
         title:"",
         keImages:[],
       },
       picform:{
-
+        imageUrl:"",
+        sort:"",
+        imagelink:"",
+        linkaddress:"",
       },
 
        rules: {
          rotationImages:[{required:true,message:"请填写添加图片"}],
          keimages:[{required:true,message:"请填写新增科室环境"}],
          user_title:[{required:true,message:"请填写医生职称"}],
-         docimages:[{required:true,message:"请填写新增名医"}]
+         docimages:[{required:true,message:"请填写新增名医"}],
+         linkaddress:[{required:true,message:"请填写链接地址"}],
+         imageUrl:[{required:true,message:"请填写图片编辑"}],
+         margtitle:[{required:true,message:"请填写导航标题"}]
       },
     };
   },
   // 医院介绍模块
   methods:{  
-    
-      addpic(){
-       this.addpicVisible = true;
-      },
-      addmagin(){
-        this.MagicNavigation = true
-      },
       addlink(){
         this.linkVisible = true;
       },
         this.doctorform.docimages.push(this.qiniuDomain + res.url)
       },
       beforeUpload(file) {   
-        const isJPG = file.type === 'image/jpeg';
+        var fileType = file.type
+        const isJPG = fileType.indexOf("image") > -1;
         const isLt2M = file.size / 1024 / 1024 < 2;
         if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
+          this.$message.error("只能上传图片");
+           return false;
+          }
+         if (!isLt2M) {
+           this.$message.error("图片大小不能超过 2MB!");
+           return false;
          }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
            var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
             })
 
         },
+
+        rotationSuccess(res,file){
+          this.picform.imageUrl = this.qiniuDomain + res.url;
+        },
+
+        rotationUpload(file){
+            var fileType = file.type
+            const isJPG = fileType.indexOf("image") > -1;
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isJPG) {
+                this.$message.error("只能上传图片");
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error("图片大小不能超过 2MB!");
+                return false;
+         }
+           var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            this.uploading = true;
+            this.loadingText = '封面图片上传中'
+
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const tokentree = response.data.data.uptoken
+                    console.log("token是什么?",tokentree)
+                    _self._data.imageData.token = tokentree;
+                    _self._data.imageData.key = key;
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                    this.uploading = false;
+                })
+            })   
+        },
         handleRemove() {
             this.file = '';
       },
          console.log("轮播图地址",this.rotationform.rotationImages); 
       },
       beforeRotationUpload(file){
-           console.log("尺寸",file.size)
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-       
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
-      
+          var fileType = file.type
+          const isJPG = fileType.indexOf("image") > -1;
+          const isLt2M = file.size / 1024 / 1024 < 2;
+          if (!isJPG) {
+             this.$message.error("只能上传图片");
+            return false;
+          }
+          if (!isLt2M) {
+            this.$message.error("图片大小不能超过 2MB!");
+             return false;
+         }
+
          var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
       },
 
       MagicUpload(file){
-         const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-       
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
+            var fileType = file.type
+            const isJPG = fileType.indexOf("image") > -1;
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isJPG) {
+                this.$message.error("只能上传图片");
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error("图片大小不能超过 2MB!");
+                return false;
+         }
       
          var date = new Date()
             var ext = getFileExtension(file.name)
 
       //新增轮播图
       AddRotationChart(formName){
+            var sorts =  this.rotationform.sort;
+            var sort = parseInt(sorts);
+            this.rotationform.sort = sort;
+            for (let index = 0; index < this.rotationdata.length; index++) {
+            this.rotationform.rotationImages.push(this.rotationdata[index].images);       
+          }
           this.$refs[formName].validate((valid)=>{
             if(valid){
               AddRotationChart(this.rotationform).then(response=>{
          console.log("图片数组",this.keform.keImages)
       },
       beforekeUpload(file){
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-        console.log("图片尺寸",file.size)
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-         }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
+            var fileType = file.type
+            const isJPG = fileType.indexOf("image") > -1;
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isJPG) {
+                this.$message.error("只能上传图片");
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error("图片大小不能超过 2MB!");
+                return false;
+            }
+
            var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
            }
          })
       },
-      add(){
-     
-      },
      selectGender(id){
         if(id == 1){
           this.define = true;
          this.definetwo = false;
          this.definethree = false;
        }
-     }
+     },
+     select(id){
+        if(id == 1){
+          this.selectone = true;
+        }
+
+        if(id == 2){
+          this.selectone = false;
+        }
+     },
+
+     AddImageslink(formName){
+          var sorts = this.picform.sort
+          var sort = parseInt(sorts)
+          this.picform.sort = sort
+          console.log("hhhe",this.picform.sort)
+        this.$refs[formName].validate((valid)=>{
+          if(valid){
+             AddImageslink(this.picform).then(response=>{
+                if(response.data.state ==1){
+                  var editpiclink = response.data.data.editpiclink;
+                  console.log("数据返回",editpiclink)
+                }
+             })
+          }
+        })
+     },
+     getEditImages(){
+       getEditImages().then(response=>{
+         if(response.data.state == 1){
+          var editpiclinks = response.data.data.editpiclinks;
+          this.rotationdata = response.data.data.editpiclinks;
+          console.log("好嗨哦",editpiclinks)
+         }
+       })
+     },
+
+     AddMagicNavi(formName){
+        this.$refs[formName].validate((valid)=>{
+          if(valid){
+            AddMagicNavi(this.editmarginform).then(response=>{
+              if(response.data.state == 1){
+               var editmargin  = response.data.data.editmargin;
+               
+              }
+            })
+          }
+        }) 
+     },
+
+     getMagicImages(){
+       getMagicImages().then(response=>{
+           if(response.data.state == 1){
+             var editmargins = response.data.data.editmargins;
+             this.margindata = response.data.data.editmargins;
+             
+             console.log("这个是什么",editmargins);
+           }
+       })
+     },
+       AddMarginChart(formName){
+         var sorts = this.marginform.sort
+          var sort = parseInt(sorts)
+          this.marginform.sort = sort
+          for (let index = 0; index < this.margindata.length; index++) {
+            this.marginform.marginImages.push(this.margindata[index].margimage);          
+          }
+      this.$refs[formName].validate((valid)=>{
+        if(valid){
+          AddMarginChart(this.marginform).then(response=>{
+             if(response.data.state ==1){
+              var macnavigation = response.data.data.macnavigation;
+              this.eight = false;
+              console.log("数据",macnavigation)
+             }
+          })
+        }
+      })
+  },
   },  
    created(){
      this.getQueryDocInfo();
      this.getQueryDoCHead();  
+     this.getEditImages();
+     this.getMagicImages();
    },
  };
 </script>
     margin-left: 25px;
     margin-top: 25px;
     text-align: center;
-  }
-  
-</style>
-<style  /deep/scoped>
-     .disabled {
-        display: none;
-    }
+  }  
 
-    .el-upload--picture-card {
-        height: auto
-    }
-
-    .el-upload-list--picture-card .el-upload-list__item {
-        height: auto;
-    }
-
-    .el-upload-list--picture-card .el-upload-list__item {
-        overflow: hidden;
-        background-color: #fff;
-        border: 1px solid #c0ccda;
-        border-radius: 6px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        width: 148px;
-        height: auto;
-        margin: 0 8px 8px 0;
-        display: inline-block;
-    }
-
-    .el-upload-list__item.is-success .el-upload-list__item-status-label {
-        display: block;
-        position: absolute;
-        right: -15px;
-        top: -6px;
-        width: 40px;
-        height: 24px;
-        background: #13ce66;
-        text-align: center;
-        -webkit-transform: rotate(45deg);
-        transform: rotate(45deg);
-        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-    }
-
-    .el-upload-list--picture-card .el-upload-list__item-actions {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        cursor: default;
-        text-align: center;
-        color: #fff;
-        opacity: 0;
-        font-size: 20px;
-        background-color: rgba(0, 0, 0, 0.5);
-        -webkit-transition: opacity .3s;
-        transition: opacity .3s;
-    }
+  .upic{
+    width: 146px;
+    height:146px;
+    border: dashed 1px #409EFF;
+    background-color: white;
+    font-size: 40px;
+  }
+  .icon{
+    width: 40px;
+    height: 40px;
+    // border: solid 1px red;
+    margin-left: 60px;
+    margin-top: 50px;
+  }
+  .ufont{
+    width:80px;
+    height: 28px;
+    // border:solid 1px red;
+    margin-left: 55px;
+    font-size: 14px;
+  }
 
+  .addrot{
+    width:146px;
+    height: 146px;
+    border: dashed 1px #409EFF;
+    margin-left: 10px;
+    background-color: white;
+  }
+  .addrotone{
+    font-size: 50px;
+    width:50px;
+    height: 50px;
+    // border: solid 1px red;
+    margin-left: 50px;
+    margin-top: 50px;
+  }
+  .addrotwo{
+    width:60px;
+    height: 30px;
+    // border: dashed 1px #409EFF;
+    margin-left: 50px;
+  }
 
+  .doc{
+    width: 146px;
+    height:146px;
+    border: dashed 1px #409EFF;
+  }
 
+  .docone{
+    width: 50px;
+    height: 50px;
+    // border: solid 1px red;
+    margin-top: 50px;
+    margin-left: 50px;
+    font-size: 50px;
+  }
+  .doctwo{
+    width: 60px;
+    height: 30px;
+    margin-left: 50px;
+    // border: solid 1px red;
+  }
 </style>
 

src/scrm_pages/site/components/office-environment.vue

-<template>
-     <div class="wq6">
-        <img src="static\images\u.png" style="width:5px;height;20px;">
-        <div class="kefont"><span >科室环境</span></div>
-        <div class="more" @click="more()">查看更多</div>
-        <div class="logo"><img src="static\images\u216.png"></div>                                
-        <div class="swiper-container" id="swiper2">
-         <div class="swiper-wrapper" id="wrapper2">
-          <div class="swiper-slide" v-for="item in keEnvironmentImages" :key="item.id">
-           <img :src="item" style="width:150px;height:125px;border-radius:5px;"/>
-          </div>
-         </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { GetOffEnvironment } from '@/api/site/site'
-    export default {
-        name: "office-environment",
-        data(){
-           return{
-             keEnvironmentImages:[],
-           }
-        },
-        methods:{
-         //获取科室环境
-          GetOffEnvironment(){
-             GetOffEnvironment().then(response=>{
-             if(response.data.state == 1){
-              var offenvironment = response.data.data.offenvironment;
-              console.log("获取科室环境",offenvironment);
-              console.log("获取轮播图片",offenvironment.keimages);
-              var str = offenvironment.keimages;
-              var Images = [];
-              Images = str.split(",");
-              console.log("数组",Images);
-             this.keEnvironmentImages =  Images;
-            }
-          });
-         },
-        },
-        created(){
-           this.GetOffEnvironment();
-        },
-        mounted(){
-            var mySwiper = new Swiper('#swiper2', {
-                direction:"horizontal",
-                loop: true, // 循环播放,
-                spaceBetween:1,
-                loopAdditionalSlides:10,
-                slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
-                centeredSlides: true, // active slide 居中
-                observer:true,//动态加载图片
-                observeParents:true,
-                pagination: {
-                    el: '.swiper-pagination',
-                },
-            });
-        },
-        
-    }
-</script>
-
-<style scoped>
-   .wq6{
-    width: 320px;
-    height: 165px;
- /* // background-color: red; */
-    color: #ffffff;
- /* // border: solid 1px black; */
-    margin-bottom: 0px;
-  }
-   #wrapper2{
-     width: 50%;
-   }
-   .kefont{
-      font-size: 14px;
-       color: red;
-       margin-left: 8px;
-       margin-top: -20px;
-    }
-
-     .more{
-       position: absolute;
-       font-size: 14px;
-       color:black;
-       margin-left: 220px;
-       margin-top: -22px;
-     }
-
-     
-    .logo{
-       position: absolute;
-       margin-left: 280px;
-       margin-top: -22px;
-     }
-</style>

src/scrm_pages/site/components/office-introduction.vue

-<template>
-     <div class="wq4">                         
-        <img src="static\images\u.png" style="width:5px;height:20px;">                           
-        <div class="kefont"><span >{{officeform.title}}</span></div>
-         <div class="more" @click="kemore()">查看更多</div>
-        <div class="logo"><img src="static\images\u216.png"></div>
-        <div class="content">
-         <span v-html="officeform.introduction" id="officecontent" class="xxcontent"></span>
-        </div>
-     </div>
-</template>
-
-<script>
-    import { GetOfficeInfo } from '@/api/site/site'
-    export default {
-        name: "office-introduction",
-        data(){
-          return{
-            officeform:{
-              title:"",
-              sort:"",
-              introduction:"", 
-           },
-          }
-        },
-        methods:{      
-     //获取科室介绍
-       GetOfficeInfo(){
-         GetOfficeInfo().then(response=>{
-           if(response.data.state == 1){
-             var offices =   response.data.data.offices;
-             this.officeform =  response.data.data.offices;
-            // console.log("获取科室介绍数据",offices);
-           }
-          })
-         },
-        },
-        created(){
-          this.GetOfficeInfo();
-        },
-        updated(){
-            let officObj =  document.getElementById('officecontent');
-            console.log("officeObj是什么",officObj)
-            let officeImages =  officObj.getElementsByTagName('img');
-            console.log("officeImages",officeImages)
-           for(let i=0;i<officeImages.length;i++){
-             officeImages[i].style.width = '332px';
-             officeImages[i].style.height = '100px';
-           }  
-        }
-    }
-</script>
-
-<style scoped>
-   .wq4{
-        width: 320px;
-        height: 230px;
-        background-color: white;
-        color: #ffffff;
-       /* border: solid 1px black; */
-        margin-bottom: 0px;
-     }
-
-      .kefont{
-       font-size: 14px;
-       color: red;
-       margin-left: 8px;
-       margin-top: -20px;
-     }
-
-     .more{
-       position: absolute;
-       font-size: 14px;
-       color:black;
-       margin-left: 220px;
-     }
-
-    .logo{
-       position: absolute;
-       margin-left: 280px;
-     }
-
-      .content{
-       position: absolute;
-       font-size: 14px;
-       color: black;
-     }
-
-    .xxcontent{
-     overflow: hidden;
-     text-overflow: ellipsis;
-     display: -webkit-box;
-     -webkit-line-clamp: 6;
-     -webkit-box-orient: vertical   
-   }
-
-</style>

src/scrm_pages/site/components/parent-component.vue

-<template>
-   <div>
-    <div v-for="item in this.patientModels" :key="item.id">
-     <div class="parent">  
-       <!--医院介绍-->
-       <div v-if="item.mode_type == 2" class="modetwo"> 
-           <img src="static\images\u.png" style="width:5px;height:20px;">
-           <div class="kefont"><span >{{item.title}}</span></div>   
-           <div class="more" @click="more()">查看更多</div>
-           <div class="logo"><img src="static\images\u216.png"></div>  
-           <div class="content">
-             <span v-html="item.Hospitals.introduction" id="content" class="yycontent"></span>
-          </div>
-        </div>
-       <!-- 科室介绍 -->
-       <div v-if="item.mode_type == 3" class="modethree">
-           <img src="static\images\u.png" style="width:5px;height:20px;">
-           <div class="kefont"><span >{{item.title}}</span></div>   
-           <div class="more" @click="more()">查看更多</div>
-           <div class="logo"><img src="static\images\u216.png"></div>  
-           <div class="xcontent">
-             <span v-html="item.Offices.introduction" id="ycontent" class="zzcontent"></span>
-           </div>
-        </div>
-
-        <!-- 名医介绍 -->
-        <div v-if="item.mode_type == 4" class="modefour">
-          <img src="static\images\u.png" style="width:5px;height:20px;">
-           <div class="kefont"><span >{{item.title}}</span></div> 
-           <div class="more" @click="more()">查看更多</div>
-           <div class="logo"><img src="static\images\u216.png"></div>
-           <div class="docborde">
-            <div class="docheart" v-for="doc in item.Editdoctor" :key="doc.id">
-              <div class="docimage">
-                <img :src="doc.dochead" style="height:80px;width:80px">
-              </div>
-              <div class="doctitle"><span class="docnamefont">{{doc.doc_name}}</span></div>
-              <div class="doccontent"><span class="xxcontent" v-html="doc.docintroduction"></span></div>
-            </div>
-           </div>
-        </div>
-
-         <!-- 科室环境 -->
-        <div v-if="item.mode_type == 5" class="modefive">
-          <img src="static\images\u.png" style="width:5px;height:20px;"> 
-          <div class="kefont"><span >{{item.title}}</span></div> 
-           <div class="more" @click="more()">查看更多</div>
-           <div class="logo"><img src="static\images\u216.png"></div>
-           <div class="swiperimages">
-           <div class="swiper-container" id="swipertwo">
-           <div class="swiper-wrapper" id="wrapper2">
-           <div class="swiper-slide"  v-for="it in item.OfficeEnviroment" :key="it.id">
-           <img :src="it.keimages" style="width:150px;height:140px;border-radius:5px;"/>
-          </div>
-          </div>
-         </div>
-        </div>
-        </div>
-     </div>
-     <div class="box"></div>
-   </div>  
-   </div> 
-</template>
-
-<script>
-  import { getQueryNewModel,getHospital,getHospitaldata } from '@/api/site/site' 
-  import Swiper from "swiper"; 
-  import { truncateSync } from 'fs';
-    export default {
-        name: "parent-component",
-        data(){
-          return{
-            modeltitle:[],
-            hospitalform:[],
-            patientModels:[],  
-            keEnvironmentImages:[],     
-            doctors:[],
-            
-          }  
-        },
-        methods:{
-         more(){
-           alert("aaaa")
-         },
-         getHospital(){
-            getHospital().then(response=>{
-                if(response.data.state == 1){
-                  this.hospitalform = response.data.data.hostital;
-                  // console.log("中国第一人",this.hospitalform);
-                }
-            }) 
-         },
-          getHospitaldata(){
-           getHospitaldata(this.patientModels).then(response=>{
-                if(response.data.state == 1){
-                  var str = "";
-                 this.patientModels = response.data.data.patientModels;
-                  console.log("获取的数据",this.patientModels);
-                 for (let index = 0; index < this.patientModels.length; index++) {
-                   const element = this.patientModels[index].OfficeEnviroment;
-                   console.log("element",element)
-                 }
-                //   var strs = str.split(",");
-                //   console.log("strs",strs)             
-                //  this.keEnvironmentImages = strs;
-                }
-           })
-         },
-        },
-        created(){
-            this.getHospital();
-            this.getHospitaldata();
-        },
-         updated(){
-            let obj = document.getElementById('content');
-          
-            let imgs =  obj.getElementsByTagName('img');
-          
-            for(let i=0;i<imgs.length;i++){
-            imgs[i].style.width = '332px';
-            imgs[i].style.height = '100px';            
-         }
-          let ycontent = document.getElementById('ycontent');
-         
-          let ximgs = ycontent.getElementsByTagName('img');
-         
-          for(let j=0;j<ximgs.length;j++){
-             ximgs[j].style.width = '332px';
-             ximgs[j].style.height = '100px';
-          }
-        },
-
-          mounted(){
-            var mySwiper = new Swiper('#swipertwo', {
-                direction:"horizontal",
-                loop: true, // 循环播放,
-                spaceBetween:10,
-                autoplay:true,
-                loopAdditionalSlides:10,
-                slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
-                centeredSlides: true, // active slide 居中
-                observer:true,//动态加载图片
-                observeParents:false,
-                pagination: {
-                    el: '.swiper-pagination',
-                },
-            });
-        },
-    }
-</script>
-
-<style scoped>
-
-    .clickmore{
-      width: 200px;
-      height: 200px;
-      border: solid 1px red;
-    }
-
-    .parent{
-      width: 320px;
-      height: 230px;
-      /* background-color:  rgba(204, 204, 204, 1); */
-    }
-
-    .box{
-      width: 320px;
-      height: 8px;
-      background-color: rgba(204, 204, 204, 1);  
-    }
-
-    .modetwo{
-      width: 320px;
-      height: 220px;
-      /* border: solid 1px red;   */
-      /* background-color: red; */
-    }
-    .modethree{
-       width: 320px;
-      height: 220px;
-      /* border: solid 1px blue;   */
-      /* background-color: blue; */
-    }
-
-    .modefour{
-      width:320px;
-      height: 230px;
-    }
-
-    .modefive{
-      width:320px;
-      height: 220px;
-    }
-
-     .logo{
-       position: absolute;
-       margin-left: 280px;
-       margin-top: -16px;
-     }
-     .kefont{
-       font-size: 14px;
-       color: red;
-       margin-left: 8px;
-       margin-top: -20px;
-     }
-
-     .more{
-       position: absolute;
-       font-size: 14px;
-       color:black;
-       margin-left: 220px;
-       margin-top: -15px;
-     }
-
-    .content{
-       position: absolute;
-       font-size: 14px;
-       color: black;
-       margin-top: 6px;
-     }
-
-     .xcontent{
-       position: absolute;
-       font-size: 14px;
-       color: black;
-       margin-top: 6px;
-     }
-
-    .yycontent{
-     overflow: hidden;
-     text-overflow: ellipsis;
-     display: -webkit-box;
-     -webkit-line-clamp: 6;
-     -webkit-box-orient: vertical   
-   }
-
-    .zzcontent{
-     overflow: hidden;
-     text-overflow: ellipsis;
-     display: -webkit-box;
-     -webkit-line-clamp: 6;
-     -webkit-box-orient: vertical   
-   }
-
-   .docborde{
-     width: 320px;
-     height: 200px;
-     /* border: solid 1px red; */
-     overflow: hidden;
-   }
-
-   .docborder{
-     width: 320px;
-     height: 100px;
-     /* border: solid 1px red; */
-     background-color:  rgba(242, 242, 242, 1);
-     margin-top: 8px;
-   }
-   .docheart{
-     width: 300px;
-     height: 92px;
-     /* border: solid 1px blue; */
-     margin-top: 5px;
-     margin-left: 3px;
-   }
-   .docimage{
-     width: 80px;
-     height: 80px;
-     /* border:solid 1px red; */
-     margin-top: 10px;
-     margin-left: 10px;
-   }
-   .doctitle{
-     width: 50px;
-     height: 20px;
-     /* border: solid 1px blue; */
-     float: right;
-     margin-right: 140px;
-     margin-top: -75px;
-   }
-
-   .doccontent{
-     width: 150px;
-     height: 50px;
-     /* border: solid 1px red; */
-     margin-top: -50px;
-     margin-left: 108px;
-     font-size: 14px;
-   }
-   .docnamefont{
-     font-size: 14px;
-
-   }
-
-   .dochead{
-       position:absolute;
-       width:80px;
-       height: 80px;
-       /* border:solid 1px green; */
-       margin-top: 10px;
-       margin-left: 10px;
-   }
-
-    .docname{
-       position: absolute;
-       width:50px;
-       height: 20px;
-       /* border: solid 1px green; */
-       margin-left: 130px;
-       margin-top: 20px;
-       font-size: 14px;
-       color:black;
-     }
-
-     .docintroduction{
-       font-size: 14px;
-       color: black;
-     }
-
-    .xxcontent{
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical   
-   }   
-
-     #wrapper2{
-     width: 50%;
-   }
-
-   .swiperimages{
-     width: 320px;
-     height: 150;
-     /* border: solid 1px red; */
-     margin-top: 40px;
-   }
-</style>

src/scrm_pages/site/components/rotation-image.vue

-<template>
-  <div>
-     <div class="wq">
-        <div class="swiper-slide">
-            <mt-swipe :auto="4000">
-              <mt-swipe-item v-for="item in rotationImages" :key="item.id">
-                  <img :src="item" style="width:480px;height:250px">
-              </mt-swipe-item>
-            </mt-swipe>
-        </div>
-     </div>
- </div>
-</template>
-
-<script>
-    import { GetRationImages } from '@/api/site/site'
-    export default {
-        name: "rotation-image",
-        data(){
-           return{
-             rotationImages:[],  
-             rotationform:[],            
-           } 
-        },
-
-        methods:{
-        //获取轮播图
-         GetRationImages(){
-          GetRationImages().then(response=>{
-            if(response.data.state ==1){
-                var rotation =  response.data.data.rotationImages;    
-                this.rotationform =  response.data.data.rotationImages;    
-               console.log("获取轮播图数据",rotation)        
-              //  console.log("获取轮播图",rotation.rotation_images); 
-              //  var str = rotation.rotation_images;
-              //  var Images = [];
-              //  Images = str.split(",");
-              //  console.log("数组",Images)
-              //  this.rotationImages = Images;
-            }
-          })
-         },
-       },
-       created(){
-           this.GetRationImages();
-       }
-    }
-</script>
-
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-     .wq{
-        width: 320px;
-        height: 185px;
-        background-color: rgba(204, 204, 204, 1);
-        color: #ffffff;
-      //  border: solid 1px red;
-        margin-bottom: 0px;
-    }
-
-</style>

src/scrm_pages/site/index.vue

               <div class="success">
                 <h1 class="name">欢迎来到微官网主页</h1>
                 <div class="tips">您可以手机扫码访问或在右侧预览</div>
-                <div class="site-code"><img :src="codeImg" alt=""></div>
+                <div id="qrcode" class="qrcode"></div>
                 <router-link to="/site/preview">
                   <el-button type="primary">进入微官网后台</el-button>
                 </router-link>
 
 <script>
 import BreadCrumb from "../components/bread-crumb";
+import QRCode from 'qrcodejs2';
 export default {
   name: "site",
   components: {
       crumbs: [{ path: false, name: "微网站" }],
       codeImg: require("../../assets/home/wei.jpg")
     };
+  },
+  methods:{
+      qrcode () {
+      let qrcode = new QRCode('qrcode', {
+        width: 100,
+        height: 100, // 高度
+        text: '56663159' // 二维码内容
+        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+        // background: '#f0f'
+        // foreground: '#ff0'
+      })
+      console.log(qrcode)
+    },
+  },
+  mounted(){
+    this.qrcode();
   }
 };
 </script>
       width: 100%;
     }
   }
+  .qrcode{
+    margin-bottom: 10px;
+    width: 100px;
+    height: 100px;
+  }
 }
 </style>

src/scrm_pages/site/preview.vue

                         <span slot="label"  @click="myindex()">首页</span>
                         <el-tabs v-model="activeName">
                             <el-tab-pane label="新增模块" name="first">
-                                 <new-feature> </new-feature>                    
+                                 <new-feature></new-feature>                    
                             </el-tab-pane>
-                            <el-tab-pane label="已使用" name="second">
+                            <el-tab-pane>
+                                <span slot="label" name="second" @click="clickAddmodel()">已使用</span>
                                 <div class="used" v-for="(item,index) in this.modelform" :key="item.id">
                                   <ul>
                                    <li>
                     </el-form-item>
                     <el-form-item>
                       <el-col :span="18" >
-                        <!-- <el-input :disabled="true"  v-show="define" v-model="navigationform.navigationaddress"></el-input> -->
                         <el-input   v-show="define" v-model="navigationform.navigationaddress"></el-input> 
                      </el-col>
                     <el-col :span="4">
                      <div class="swiper-container swiper-no-swiping" id="swiper1">
                       <div class="swiper-wrapper" id="wrapper1">   
                          <div v-for="item in this.patientModels" :key="item.id" v-show="modelshowtwo">
-                            <div class="parent">  
+                           <!-- 轮播图 -->
+                             <div v-if="item.mode_type == 1" class="modeone">                                                                 
+                                 <mt-swipe :auto="4000" class="swipertwo">
+                                 <mt-swipe-item v-for="it in rotatationImages" :key="it.id">
+                                   <img :src="it" style="width:318px;height:230px" >
+                                 </mt-swipe-item>
+                                 </mt-swipe>                                                                             
+                             </div>
                               <!--医院介绍-->
                             <div v-if="item.mode_type == 2" class="modetwo"> 
                                <img src="static\images\u.png" style="width:5px;height:20px;">
                                 <div class="logo"><img src="static\images\u216.png"></div>
                                 <div class="docborde">
                                  <div class="docheart" v-for="doc in item.Editdoctor" :key="doc.id">
-                                 <div class="docimage">
-                                  <img :src="doc.dochead" style="height:80px;width:80px">
-                                  </div>
-                             <div class="doctitle"><span class="docnamefont">{{doc.doc_name}}</span></div>
-                              <div class="doccontent"><span class="xxcontent" v-html="doc.docintroduction"></span></div>
-                              </div>
+                                   <div class="docimage">
+                                    <img :src="doc.dochead" style="height:80px;width:80px">
+                                   </div>
+                                 <div class="doctitle"><span class="docnamefont">{{doc.doc_name}}</span></div>
+                                 <div class="doccontent"><span class="xxcontent" v-html="doc.docintroduction"></span></div>
+                               </div>
                               </div>
-                             </div>
+                          </div>
 
                             <!-- 科室环境 -->
                            <div v-if="item.mode_type == 5" class="modefive">
                             <div class="swiperimages">
                             <div class="swiper-container" id="swipertwo">
                             <div class="swiper-wrapper" id="wrapper2">
-                            <div class="swiper-slide"  v-for="it in item.OfficeEnviroment" :key="it.id">
-                             <img :src="it.keimages" style="width:150px;height:140px;border-radius:5px;"/>
+                            <div class="swiper-slide"  v-for="it in keEnvironmentImages" :key="it.id">
+                             <img :src="it" style="width:150px;height:140px;border-radius:5px;"/>
                            </div>
                            </div>
                            </div>
                             </div>
                            </div>
-                          </div>
+
+                           <!-- 魔方导航 -->
+                           <div v-if="item.mode_type== 8" class="modeeight">
+                              {{item.title}}     
+                           </div>
+                          
                           <div class="box"></div>
                          </div>  
                           <contact-us  v-show="modelshow"></contact-us>                              
                       </div>         
                      </div>
                    </div>  
-                      
-                     
                       <!-- 医院介绍详情页-->                
                       <div class="xiangqing"  v-show="shows" v-html="hospitalform.introduction"></div> 
                       <!-- 科室介绍详情页 -->                        
                              </div>
                           </div>
                         </div>
-            
+                         
+                       <!--返回首页-->
+                     <div class="reback" v-show="showback">
+                       <div class="rebackone">
+                         <img src="static/images/u373.png">
+                       </div>
+                       <div class="rebacktwo">
+                         <span @click="returnIndex()">首页</span>
+                      </div>
+                     </div>
+                     <!-- 回到顶部 -->
+                     <div class="reindex" v-show="showindex">
+                        <div class="reindexone">
+                           <img src="static/images/u378.png">
+                        </div>
+                        <div class="reindextwo">
+                            <span>顶部</span>
+                        </div>
+                     </div>
                       
                       <div id="qrcode" class="qrcode"></div>
 
 import { rejects, fail } from 'assert';
 import { copyFile } from 'fs'; 
 import { truncateSync } from 'fs';
+import { isAbsolute } from 'path';
 export default {
   name: "preview",
   components: {
        patientModels:[],  
        keEnvironmentImages:[],     
        doctors:[],
+       rotatationImages:[],
       crumbs: [{ path: false, name: "预览" }],
       activeName: 'first',
       name: "car",
        definethree:false,
        definefour:false,
        disabled:true,
+       showback:false,
+       showindex:false,
       ellipsis:'',
       docnames:[],
        options: [{
           worktime:[{required:true,message:"请填写工作时间"}],
           rideway:[{required:true,message:"请填写乘车方式"}]   
       },
-        rotationImages:[],
         keEnvironmentImages:[],
         qiniuDomain: 'https://images.shengws.com/',
         rotationData: { token:'',key: '' },
           getHospitaldata(){
            getHospitaldata(this.patientModels).then(response=>{
                 if(response.data.state == 1){
-                  var str = "";
+                  var str = [];
+                  var images = [];
                  this.patientModels = response.data.data.patientModels;
-                  console.log("获取的数据",this.patientModels);
-                 for (let index = 0; index < this.patientModels.length; index++) {
-                   const element = this.patientModels[index].OfficeEnviroment;
-                   console.log("element",element)
-                 }
-                //   var strs = str.split(",");
-                //   console.log("strs",strs)             
-                //  this.keEnvironmentImages = strs;
+                 for (let index = 0; index < this.patientModels.length; index++) {   
+                   if(this.patientModels[index].Rotation.rotation_images!=""){
+                     str.push(this.patientModels[index].Rotation.rotation_images);
+                   }                                               
+                }   
+                var  strs =  str.join(",")
+                var ss = strs.split(",")
+                this.rotatationImages = ss;
+                for(let i = 0; i<this.patientModels.length;i++){
+                  if(this.patientModels[i].OfficeEnviroment.keimages !=""){
+                     images.push(this.patientModels[i].OfficeEnviroment.keimages);
+                  }       
+                }
+                var imgs =  str.join(",")
+                var imgss = imgs.split(",")
+                this.keEnvironmentImages = imgss;
+                console.log("keimages是什么",imgss);
+                console.log("获取的各模块数据",this.patientModels);   
                 }
            })
          },
       },
 
       shareAvatarUpload(file){
-           var fileType = file.type
+            var fileType = file.type
             const isJPG = fileType.indexOf("image") > -1;
             const isLt2M = file.size / 1024 / 1024 < 2;
             if (!isJPG) {
             console.log("医院详情数据",hospital)
             console.log("医院详情数据是",this.hospitalform)
             this.show = false;
-           this.shows = true;
+            this.shows = true;
+            this.showback = true;
+            this.showindex = true;
          }
       })
     },
+    returnIndex(){
+      this.show = true;
+      this.shows = false;
+      this.showback = false;
+      this.showindex = false;
+      this.docshow = false;
+      this.shows = false;
+      this.keshow = false;
+    },
 
     //查看科室详情
     officemore(id){
            console.log("科室详情数据",offices)
            this.show = false;
            this.keshow = true;
+           this.showback = true;
+           this.showindex = true;
          }
       })   
     },
            this.editdocfrom  =  response.data.data.editdoctor;
             this.show = false;
             this.docshow = true;
+            this.showback = true;
+            this.showindex = true;
            console.log("编辑医生返回数据",editdoctor)
          }
        })
      clickmodel(){
         this.GetUserdModel();
      },
+     clickAddmodel(){
+       this.getQueryNewModel();
+     },
      //查询首页已使用的模块
       getQueryNewModel(){
            getQueryNewModel(this.modelform).then(response=>{
             if(response.data.state ==1){
              var model  = response.data.data.model;
-             this.modelform  = response.data.data.model;
-             console.log("返回新的数据",model);
+             this.modelform  = response.data.data.model;           
             }
           });
          },
        let obj = document.getElementById('content');
           
        let imgs =  obj.getElementsByTagName('img');
-          
+  
         for(let i=0;i<imgs.length;i++){
           imgs[i].style.width = '332px';
           imgs[i].style.height = '100px';            
         }
+
         let ycontent = document.getElementById('ycontent');
          
         let ximgs = ycontent.getElementsByTagName('img');
      font-size: 14px;
      overflow-y: auto;
      color: black;
+     overflow: hidden;
    }
    officexiangqing{
       position: relative;
       background-color: rgba(204, 204, 204, 1);  
     }
 
+    .modeone{      
+        width: 318px;
+        height: 210px;
+        // border: solid 1px red;
+    }
+    .swipertwo{
+      width:318px;
+      height: 230px;
+      margin-top: 25px;
+      // border:solid 1px red;
+    }
+
     .modetwo{
       width: 320px;
       height: 220px;
     .modefour{
       width:320px;
       height: 230px;
+      
     }
 
     .modefive{
       width:320px;
-      height: 220px;
+      height: 200px;
+      // border: solid 1px red;
+    }
+
+    .modeeight{
+      width: 320px;
+      height: 200px;
+      // border: solid 1px red;
+    }
+
+     .mac{
+       position: absolute;
+       width: 300px;
+       height: 100px;
+       border:solid 1px red;
+       margin-left: 5px;
+       margin-top: 5px;
+    }   
+    #mactwo{
+
+    }
+
+    .macone{
+      position: absolute;
+      width: 50px;
+      height: 90px;
+      border: solid 1px red;
+      top: 5px;
+      left: 5px;
     }
 
      .logo{
    .docborde{
      width: 320px;
      height: 200px;
-     /* border: solid 1px red; */
+    //  border: solid 1px red; 
      overflow: hidden;
    }
 
      margin-top: 8px;
    }
    .docheart{
-     width: 300px;
+     width: 310px;
      height: 92px;
-     /* border: solid 1px blue; */
+    //  border: solid 1px blue; 
+     background-color: rgba(242, 242, 242, 1);
      margin-top: 5px;
      margin-left: 3px;
    }
    .docimage{
      width: 80px;
      height: 80px;
-     /* border:solid 1px red; */
-     margin-top: 10px;
      margin-left: 10px;
+     padding-top: 5px;
    }
    .doctitle{
      width: 50px;
      height: 20px;
      /* border: solid 1px blue; */
      float: right;
-     margin-right: 140px;
+     margin-right: 152px;
      margin-top: -75px;
    }
 
        height:100px;
       //  border: solid red 1px;
        margin-left: 5px;
-
+      overflow: hidden;
      }
 
      .doctwo{
      width: 320px;
      height: 150;
      /* border: solid 1px red; */
-     margin-top: 40px;
+     margin-top: 20px;
    }
 
    .navigationone{
     margin-top: 50px;
     margin-left: 10px;
   }
+
+  .reback{
+    position: absolute;
+    width:50px;
+    height: 50px;
+    border:solid 1px rgba(255, 255, 255, 1);
+    margin-left: 298px;
+    margin-top: -390px;
+    background-color: rgba(255, 255, 255, 1);
+  }
+  .rebackone{
+    position: absolute;
+    width:20px;
+    height: 20px;
+    // border: solid 1px red;
+    left: 13px;
+    top:5px;
+  }
+  .reindexone{
+    position: absolute;
+    width:20px;
+    height: 20px;
+    // border: solid 1px red;
+    left:13px;
+    top:5px;
+  }
+
+  .rebacktwo{
+    position: absolute;
+    width: 30px;
+    height: 20px;
+    // border:solid 1px red;
+    left: 10px;
+    top: 28px;
+    font-size: 14px;
+    color: #FF6600;
+  }
+  
+  .reindextwo{
+    position: absolute;
+    width: 30px;
+    height: 20px;
+    left: 10px;
+    top:28px;
+    font-size: 14px;
+    color: #FF6600;
+    
+  }
+  .reindex{
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: solid 1px rgba(255, 255, 255, 1);
+    margin-left: 298px;
+    margin-top: -335px;
+  }
+
+ 
 </style>
 
 

src/scrm_pages/systemsetting/components/CreateStaffForm.vue

               console.log("上传轮机",this.form.dochead)
               },
              beforeAvatarUpload(file) {
-              const isJPG = file.type === 'image/jpeg';
-              console.log("是什么呢",isJPG)
+               var fileType = file.type
+               const isJPG = fileType.indexOf("image") > -1;
               const isLt2M = file.size / 1024 / 1024 < 2;
-             if (!isJPG) {
-              this.$message.error('上传头像图片只能是JPG或者png格式!');
-            }
-            if (!isLt2M) {
-              this.$message.error('上传头像图片大小不能超过 2MB!');
-            }
+              if (!isJPG) {
+                this.$message.error("只能上传图片");
+                return false;
+             }
+             if (!isLt2M) {
+                this.$message.error("图片大小不能超过 2MB!");
+                return false;
+             }
 
              var date = new Date()
              var ext = getFileExtension(file.name)
     .avatar-uploader-icon {
       font-size: 20px;
       color: #8c939d;
-      width: 44px;
+      width: 50px;
       height: 50px;
       line-height: 50px;
       text-align: center;
     }
     .avatar {
       width: 68px;
-      height: 50px;
+      height: 40px;
       display: block;
     }
 </style>