科室环境模块

src/api/site/site.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+export function AddRotationChart(data){
+    console.log("新增轮播图",data);
+    return request({
+        url:"/api/site/addrotationchart",
+        method:"Post",
+        data:data,
+    })
+}
 
 export function saveHispital(data){
     console.log("添加医院",data);
@@ -35,4 +43,58 @@ export function AddDoctorInfo(data){
        method:"Post",
        data:data,
    })
+}
+
+export function AddOfficeEnvironment(data){
+   console.log("新增科室环境",data);
+   return request({
+       url:"/api/site/keenvironment",
+       method:"Post",
+       data:data,
+   })
+}
+
+export function GetRationImages(params){
+    console.log("获取轮播图片",params)
+    return request({
+        url:"/api/site/getrationimages",
+        method:'Get',
+        params:params,
+    })
+}
+
+export function GetHospitalInfo(params){
+   console.log("获取医院信息",params)
+   return request({
+       url:"/api/site/gethospitalinfo",
+       method:'Get',
+       params:params,
+   })
+}
+
+export function GetOfficeInfo(params){
+   console.log("获取科室信息",params)
+   return request({
+       url:"/api/site/getofficeinfo",
+       method:'Get',
+       params:params,
+   })
+}
+
+export function GetDoctorInfo(params){
+    console.log("获取名医介绍",params)
+    return request({
+        url:"/api/site/getdoctorinfo",
+        method:'Get',
+        params:params,
+    })
+}
+
+export function GetOffEnvironment(params){
+   console.log("获取科室环境",params)
+   return request({
+       url:"/api/site/getOffEnvironment",
+       method:'Get',
+       params:params,
+   })
 }

src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-
+import '@/utils/directives.js'
 import '@/styles/index.scss' // global css
 import '@/styles/variables.scss' // global css
 import '@/assets/iconfont/iconfont.css'
@@ -31,6 +31,7 @@ Vue.use(Mint);
 import vuescroll from 'vuescroll'
 import { read } from 'fs';
 import 'vuescroll/dist/vuescroll.css';
+import 'swiper/dist/css/swiper.min.css'
 Vue.use(vuescroll)
 Vue.use(Element, {
   size: 'medium', // set element-ui default size

src/scrm_pages/article/articleList.vue

@@ -135,6 +135,9 @@
         checked: false,
         selectAll:false,
         selectReply:[],
+       startPointX: 0,
+       changePointX: 0,
+       showIndex: 0,
       }
     },
     methods:{
@@ -300,7 +303,7 @@
                   })
                });
           })
-        }
+        },
     },
     created(){
       this.GetAllArticles();

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

@@ -60,25 +60,44 @@
     :visible.sync="dialogVisible"
     width="550px"
     :before-close="handleClose">
-    <el-form ref="rotationform" :model="rotationform" label-width="90px" rules="rules" >
-      <el-form-item label="模块标题: " required prop="title">
+    <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-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
-          limit="2"
+      <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"
-          :file-list="filelist">
-          <i class="el-icon-plus"></i>
-        </el-upload>   
+         :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()"></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>
        <span class="uploadfont">图片已上传0张,最多上传9张图片</span>
     </el-form>
@@ -92,8 +111,11 @@
   <el-dialog
     title="新增医院介绍"
     :visible.sync="two"
-    width="550px"
-    :before-close="handleClose">
+    width="50%"
+    :before-close="handleClose"
+     :modal='false'
+     v-dialogDrag
+     :close-on-click-modal="false">
     <el-form ref="hispitalform" :model="hispitalform" label-width="90px" :rules="rules">
       <el-form-item label="模块标题:" required prop="title">
         <el-input v-model="hispitalform.title"></el-input>
@@ -103,12 +125,12 @@
         <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
       </el-form-item>
       <el-form-item label="医院介绍:" required prop="introduction">
-        <el-input
-          type="textarea"
-          :rows="6"
-          placeholder="请输入内容"
-          v-model="hispitalform.introduction">
-        </el-input>
+         <keep-alive v-show="editorshow">
+            <neditor ref="neditor"
+              id="editor"
+              v-bind:r_content="hispitalform.introduction">
+            </neditor>
+        </keep-alive>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -121,7 +143,7 @@
   <el-dialog
     title="新增科室介绍"
     :visible.sync="three"
-    width="550px"
+    width="50%"
     :before-close="handleClose">
     <el-form ref="administform" :model="administform" label-width="90px" :rules="rules">
       <el-form-item label="模块标题:" required prop="title">
@@ -132,12 +154,12 @@
         <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
       </el-form-item>
       <el-form-item label="科室介绍:" required prop="introduction">
-        <el-input
-          type="textarea"
-          :rows="6"
-          placeholder="请输入内容"
-          v-model="administform.introduction">
-        </el-input>
+         <keep-alive>
+            <neditor ref="neditor"
+              id="editor2"
+              v-bind:r_content="administform.introduction">
+            </neditor>
+        </keep-alive>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -202,7 +224,7 @@
     :visible.sync="five"
     width="550px"
     :before-close="handleClose">
-    <el-form ref="keform" :model="keform" label-width="110px" rules="rules">
+    <el-form ref="keform" :model="keform" label-width="110px" :rules="rules">
       <el-form-item label="模块标题: " required prop="title">
         <el-input v-model="keform.title"></el-input>
       </el-form-item>
@@ -210,37 +232,41 @@
         <el-input v-model="keform.sort"></el-input>
         <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
       </el-form-item>
-      <el-form-item label="新增科室环境: " required prop="keimages">
-        <div class="flex-img">
-          <div class="el-upload-list el-upload-list--picture-card" v-show="keshow">            
-            <div class="el-upload-list__item is-success">              
-                 <img class="flex-img__image" :src="keform.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" ></i>
-                        <i class="el-icon-delete"></i>
-                    </span>
-                </span>
-            </div>   
-        </div>   
-          <el-upload
-           :data="keData"
-            action="https://upload.qiniup.com"
-            list-type="picture-card"
-            :on-success="handleSuccess"
-            :before-upload="beforehandleUpload"
-            v-show="!keshow">
-            <i class="el-icon-plus"></i>
-        </el-upload>
-        </div>
-      </el-form-item>
+      <el-form-item label="新增科室环境:" required prop="keImages" v-model="keform.keImages">
+        <el-upload
+          :data="keData"
+          action="https://upload.qiniup.com"
+          list-type="picture-card"
+         :on-success="imageKeSuccess"
+         :before-upload="beforekeUpload"
+         >
+        <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"></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>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="five = false">取 消</el-button>
-      <el-button type="primary" @click="five = false">确 定</el-button>
+      <el-button type="primary" @click="AddOfficeEnvironment('keform')">确 定</el-button>
     </span>
   </el-dialog>
   <!-- 新增文章列表 -->
@@ -318,7 +344,6 @@
         <el-upload
           action="https://jsonplaceholder.typicode.com/posts/"
           list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove"
           >
           <i class="el-icon-plus"></i>
@@ -382,21 +407,61 @@
       <el-button type="primary" @click="AddDoctorInfo('eidtDoctorform')">确 定</el-button>
       </span>
    </el-dialog>
+
+   <!-- 编辑图片 -->
+    <el-dialog
+       title="提示"
+       :visible.sync="dialogRotationVisible"
+        width="30%"
+        :before-close="handleClose"
+        center>
+        <div class="eidtRotationimages">
+          <img src="static/images/a.jpg" style="width:260px;height:200px">
+        </div>
+        <el-form label-width="90px" class="clearfix">
+           <el-form-item  label="图片描述:">
+              <el-input></el-input>
+           </el-form-item>
+           <el-form-item label="图片链接:">
+              <el-radio-group v-model="radio">
+                <el-radio :label="3">无</el-radio>
+                <el-radio :label="6">自定义</el-radio>
+              </el-radio-group>
+           </el-form-item>
+           <el-form-item label="链接地址:">
+               <el-input style="width:320px"></el-input>
+               <el-button  type="primary">链接地址</el-button>
+           </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+       <el-button @click="dialogRotationVisible = false">取 消</el-button>
+       <el-button type="primary" @click="dialogRotationVisible = false">确 定</el-button>
+      </span>
+   </el-dialog>
 </div>
 </template>
 
 <script>
-   import { saveHispital,addOffices,AddDoctor,AddDoctorInfo } from '@/api/site/site'  
+   import { AddRotationChart, saveHispital,addOffices,AddDoctor,AddDoctorInfo,AddOfficeEnvironment } from '@/api/site/site'  
    import { getToken } from '@/api/qiniu'
    import { getFileExtension} from '@/utils/tools'
    import { isIP } from 'net';
+   import { quillEditor } from 'vue-quill-editor'
+   import Neditor from '@/components/Neditor'
+   import 'quill/dist/quill.core.css'
+   import 'quill/dist/quill.snow.css'
+   import 'quill/dist/quill.bubble.css'
 export default {
   name: "newfeature",
+  components:{
+     Neditor,
+   },
   props: ['image', 'clearList'],
   data() {
     return {
       new1: require("../../../assets/preview/new-1.png"),
       dialogVisible: false,
+      dialogRotationVisible: false,
       two: false,
       three: false,
       four: false,
@@ -413,11 +478,10 @@ export default {
       keData: { token: '' ,key: ''},
       file: this.image ? this.image : '',
       hideShow:false,
-      keshow:false,
       show:false,
-      keShow:false,
       centerDialogVisible:false,
       filelist:[],
+      radio:3,
       form: {
         name: "",
         sort:"", 
@@ -454,8 +518,8 @@ export default {
         title:"",
         sort:"",
         keImages:[],
-        images:"",
       },
+
        rules: {
          title: [{required: true, message: "请填写模块标题",},],
          sort: [{required: true,message:"请填写排序值"}],
@@ -464,65 +528,23 @@ export default {
          docname: [{required:true,message:"请填写医生姓名"}],
          docHead: [{required: true,message:"请填写医生头像"}],
          docpositional:[{required:true,message:"请填写医生职位"}],
-         docintroduction:[{required:true,message:"请填写医生简介"}]
+         docintroduction:[{required:true,message:"请填写医生简介"}],
+         images:[{required:true,message:"请填写新增科室环境"}],
+         rotationImages:[{required:true,message:"请填写添加图片"}],
+         keimages:[{required:true,message:"请填写新增科室环境"}]
       },
     };
   },
   // 医院介绍模块
-  methods:{    
+  methods:{   
+     //轮播图
+     rotationEditImages(){
+        this.dialogRotationVisible = true;
+     },
+
       handleRemove(file) {
         console.log(file);
       },
-      handlePictureCardPreview(file,res) {
-        //  this.dialogImageUrl = this.qiniuDomain + res.url;   
-        //  this.dialogVisible = true;
-      },
-      handleDownload(file) {
-        console.log(file);
-      },
-      handleClose(done){
-         this.$confirm('确认关闭?').then(_ =>{
-           done();
-         })
-         .catch(_ =>{});
-      }, 
-
-      handleSuccess(res,file){
-         this.keform.keImages.push(this.qiniuDomain + res.url);
-         this.keform.images = this.qiniuDomain + res.url;
-         this.keshow = true;
-      },
-      beforehandleUpload(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 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.keData.token = tokentree;
-                    _self._data.keData.key = key;
-                    resolve(true)
-                }).catch(err => {
-                    reject(false)
-                    this.uploading = false;
-                })
-            })
-    
-      },
-      
       imageUploadSuccess(res,file) {
         this.doctorform.image = this.qiniuDomain + res.url;  
         this.hideShow = true;
@@ -640,12 +662,15 @@ export default {
       },
 
       //新增轮播图
-      AddRotationChart(forName){
+      AddRotationChart(formName){
           this.$refs[formName].validate((valid)=>{
             if(valid){
               AddRotationChart(this.rotationform).then(response=>{
                   if(response.data.state==1){
-
+                    var rotation =  response.data.data.rotation;
+                    console.log("返回数据",rotation);
+                    this.$message.success("添加轮播图成功");
+                    this.dialogVisible = false;
                   }
               })
             }
@@ -654,6 +679,8 @@ export default {
 
     //医院介绍
      saveHispital(formName){
+         this.hispitalform.introduction = this.$refs.neditor.content;
+        console.log("文章内容",this.$refs.neditor.content)  
         this.$refs[formName].validate((valid)=>{
           if(valid){
              saveHispital(this.hispitalform).then(response=>{
@@ -670,6 +697,7 @@ export default {
 
      //科室介绍
      addAdminist(formName){
+       this.administform.introduction = this.$refs.neditor.content;
         this.$refs[formName].validate((valid)=>{
           if(valid){
              addOffices(this.administform).then(response=>{
@@ -721,12 +749,72 @@ export default {
            }
          })
      },   
+      
+      // 科室环境
+      deleteKe(){
+      },
+        //科室介绍
+      imageKeSuccess(res,file){
+        console.log("图片路径",file.url)
+         this.keform.keImages.push(this.qiniuDomain + res.url);
+         console.log("图片数组",this.keform.keImages)
+        // this.keform.images = this.qiniuDomain + res.url;
+        // console.log("图片url",this.keform.images)
+      },
+      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 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.keData.token = tokentree;
+                    _self._data.keData.key = key;
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                    this.uploading = false;
+                })
+            })
+      },
+
+      AddOfficeEnvironment(formName){
+         this.$refs[formName].validate((valid)=>{
+           if(valid){
+             AddOfficeEnvironment(this.keform).then(response=>{
+                  if(response.data.state == 1){
+                    var offenvironment = response.data.data.offenvironment;
+                    this.five = false;
+                    console.log("返回数据",offenvironment);
+                  }
+             })
+           }
+         })
+      }
   },  
  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+     .eidtRotationimages{
+       text-align: center;
+       margin-bottom: 12px;
+     }
+         
      .clearfix {
         clear: both;
     }

src/scrm_pages/site/preview.vue

@@ -38,10 +38,10 @@
                    <vue-scroll :ops="ops" style="width:348px;height:100%;right:37px">  
                      <div>              
                       <mt-swipe :auto="4000">
-                       <mt-swipe-item><img src="static/images/b.jpg" style="width:380px;height:250px"></mt-swipe-item>
-                       <mt-swipe-item><img src="static/images/c.jpg" style="width:380px;height:200px"></mt-swipe-item>
-                       <mt-swipe-item><img src="static/images/d.jpg" style="width:380px;height:200px"></mt-swipe-item>
-                       </mt-swipe>  
+                       <mt-swipe-item v-for="item in rotationImages" :key="item.id">
+                         <img :src="item" style="width:380px;height:250px">
+                      </mt-swipe-item>
+                      </mt-swipe>  
                      </div>  
                      <div class="box"></div>
                      <div class="list"></div>  
@@ -65,60 +65,79 @@
                      <div class="yyjs">医院介绍</div>
                      <div class="ckgd"><span @click="more()">查看更多</span></div>
                      <div class="ljtp"></div>
-                     <div class="yytp">
+                     <!-- <div class="yytp">
                        <img src="static/images/a.jpg" style="width:322px;height:100%">
-                     </div>
+                     </div> -->
                      <div class="yyjj">
-                        <span>深圳市人民医院始建于1946年，前身是宝安县卫生院，1979年伴随深圳经济特区成立更名为深圳市人民医院。
+                        <!-- <span>深圳市人民医院始建于1946年，前身是宝安县卫生院，1979年伴随深圳经济特区成立更名为深圳市人民医院。
                               1994年被评为深圳首家“三级甲等”医院。1996年经国务院侨办批准成为暨南大学医学院第二附属医院
-                              2005年升格为暨南大学第二临床医学院。伴随着经济....</span>
+                              2005年升格为暨南大学第二临床医学院。伴随着经济....</span> -->
+                         <span v-html="hispitalform.introduction" id="content" class="yycontent"></span>   
                      </div>
                      <div class="box3"></div>
                      <div class="u2"></div>
                      <div class="kejsfont">科室介绍</div>
                      <div class="ckgd2">查看更多</div>
                      <div class="ljtp2"></div>
-                     <div class="ketp">
+                     <!-- <div class="ketp">
                         <img src="static/images/a.jpg" style="width:322px;height:100%">
-                     </div>
+                     </div> -->
                      <div class="kejj">
-                         <span>
-                           深圳市人民医院始建于1946年，前身是宝安县卫生院，1979年伴随深圳经济特区成立更名为深圳市人民医院。
-                           1994年被评为深圳首家“三级甲等”医院。1996年经国务院侨办批准成为暨南大学医学院第二附属医院
-                           2005年升格为暨南大学第二临床医学院。伴随着经济....
-                         </span>
+                       <span v-html="officeform.introduction" id="officecontent" class="xxcontent"></span>
                      </div>
                      <div class="box4"></div>
                      <div class="u3"></div>
                      <div class="myjsfont">名医介绍</div>
                      <div class="ckgd3">查看更多</div>
                      <div class="ljtp2"></div>
-                     <div class="ketp2">
+                     <div class="ketp2" v-for="item in doctorInfos" :key="item.id">
                         <div class="ketp3">
-                          <img src="static/images/a.jpg" style="width:100%;height:100%">
+                          <img :src="item.dochead" style="width:100%;height:100%">
                         </div>
                         <div class="ketp4">
-                            <div class="docname">吴教授</div>
-                            <div class="docintroduction">北京医科大学硕士,曾工作与中国医大二院妇、辽宁省...</div>
+                            <div class="docname">{{item.docname}}</div>
+                            <div class="docintroduction"><span  class="zzcontent">{{item.docintroduction}}</span></div>
                         </div>
                      </div>
-
-                      <div class="ketp2">
-                        <div class="ketp3">
-                          <img src="static/images/a.jpg" style="width:100%;height:100%">
-                        </div>
-                        <div class="ketp4">
-                            <div class="docname">吴教授</div>
-                            <div class="docintroduction">北京医科大学硕士,曾工作与中国医大二院妇、辽宁省...</div>
-                        </div>
-                     </div>
-
+ 
                      <div class="box4"></div>
                      <div class="u3"></div>
                      <div class="myjsfont">科室环境</div>
                      <div class="ckgd3">查看更多</div>
-                     <div class="ljtp2"></div>
-                     <div>              
+                     <div class="ljtp3"></div>
+                     <div class="swiper-container">
+                      <div class="swiper-wrapper">
+                        <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 class="box5"></div>
+                   <div class="u3"></div>
+                   <div class="myjsfont">新闻动态</div>
+                   <div class="ckgd3">查看更多</div>
+                   <div class="ljtp4"></div>
+                    <div class="swiper-container new">
+                      <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                           <div class="new1">
+                                <div class="new6">
+                                  <div class="new2">
+                                     <img src="static/images/a.jpg" style="width:150px;heigth:125px">
+                                  </div>
+                                 <div class="new3">
+                                      <span>亲子鉴定头发样品采集</span>
+                                 </div>
+                                 <div class="new4"> </div>
+                                 <div class="new5">
+                                    <span>亲子鉴定头发样品采集</span>
+                                 </div>
+                               </div>  
+                           </div>
+                        </div>
+                      </div>
+                     </div>         
+                     <!-- <div>              
                       <mt-swipe :auto="4000">
                        <mt-swipe-item><img src="static/images/a.jpg" style="width:380px;height:250px"></mt-swipe-item>
                        <mt-swipe-item><img src="static/images/a.jpg" style="width:380px;height:200px"></mt-swipe-item>
@@ -131,7 +150,7 @@
                        <mt-swipe-item><img src="static/images/a.jpg" style="width:380px;height:200px"></mt-swipe-item>
                        <mt-swipe-item><img src="static/images/a.jpg" style="width:380px;height:200px"></mt-swipe-item>
                        </mt-swipe>  
-                     </div>    
+                     </div>     -->
                  </vue-scroll>
                </div>                 
             </div>  
@@ -147,8 +166,7 @@
                   <img src="static/images/a.jpg">   
                   <div class="shouye" @click="indexone()">首页</div> 
                 </vue-scroll>            
-              </div>  
-                       
+              </div>                     
       </div>
    </div>
 </template>
@@ -161,6 +179,10 @@ import AddContact from "./components/add-contact";
 import { Swipe, SwipeItem } from 'mint-ui';
 import Vue from 'vue';
 import 'mint-ui/lib/style.css';
+import { GetRationImages,GetHospitalInfo,GetOfficeInfo,GetDoctorInfo,GetOffEnvironment } from '@/api/site/site'  
+import { IncomingMessage } from 'http';
+import { isIP } from 'net';
+import Swiper from "swiper";
 Vue.component(Swipe.name, Swipe);
 Vue.component(SwipeItem.name, SwipeItem);
 
@@ -172,6 +194,15 @@ export default {
     UsedList,
     AddContact
   },
+  filters:{
+     ellipsis (value) {
+       if(!value) return ''
+       if(value.length > 8){
+         return  value.slice(0,200)+ '...'
+       }
+       return value
+     }
+  },
   data() {
     return {
       crumbs: [{ path: false, name: "预览" }],
@@ -179,6 +210,8 @@ export default {
       name: "car",
       show:true,
       shows:false,
+      showimages:true,
+      ellipsis:'',
        ops: {
           vuescroll: {},
           scrollPanel: {},
@@ -191,10 +224,30 @@ export default {
             background: 'white',
           }
         },
+        rotationImages:[],
+        keEnvironmentImages:[],
+        hispitalform:{
+          title:"",
+          sort:"",
+          introduction:"",
+      },
+        officeform:{
+          title:"",
+          sort:"",
+          introduction:"", 
+      },
+       eidtDoctorform:{
+       docname:"",
+       docHead:"",
+       docpositional:"",
+       docintroduction:"",
+      },
+      doctorInfos:[],
     };
   },
 
   methods:{
+    
     more(){
       this.show = false;
       this.shows = true;
@@ -202,6 +255,119 @@ export default {
     indexone(){
       this.shows = false;
       this.show = true;
+    },
+    handleClick(){
+
+    },
+    //获取轮播图
+      GetRationImages(){
+        GetRationImages().then(response=>{
+            if(response.data.state ==1){
+                var rotation =  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;
+              //  this.rotationImages.splice(index,1);
+            }
+        })
+      },
+
+      //获取医院介绍
+      GetHospitalInfo(){
+        GetHospitalInfo().then(response=>{
+          if(response.data.state == 1){
+            var hospital =  response.data.data.hospital;
+            this.hispitalform =  response.data.data.hospital;
+            console.log("获取医院介绍数据",hospital);
+          }
+        })
+      },
+
+      //获取科室介绍
+      GetOfficeInfo(){
+        GetOfficeInfo().then(response=>{
+          if(response.data.state == 1){
+            var offices =   response.data.data.offices;
+            this.officeform =  response.data.data.offices;
+            console.log("获取科室介绍数据",offices);
+          }
+        })
+      },
+
+    //获取名医介绍
+    GetDoctorInfo(){
+      GetDoctorInfo().then(response=>{
+        if(response.data.state == 1){
+           var doctor = response.data.data.doctor;
+           this.doctorInfos = response.data.data.doctor;
+           console.log("获取名医介绍",doctor);
+        }
+      })
+    },
+
+    //获取科室环境
+    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.GetRationImages();
+    this.GetHospitalInfo();
+    this.GetOfficeInfo();
+    this.GetDoctorInfo();
+    this.GetOffEnvironment();
+  },
+  mounted(){
+            var mySwiper = new Swiper('.swiper-container', {
+                // autoplay: {
+                //     disableOnInteraction: false, // 用户操作后，不停止自动切换
+                // }, // 自动播放
+                direction:"horizontal",
+                loop: true, // 循环播放,
+                autoplay:false,
+                spaceBetween:1,
+                loopAdditionalSlides:10,
+                slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
+                centeredSlides: true, // active slide 居中
+                observer:true,//动态加载图片
+                observeParents:true,
+                pagination: {
+                    el: '.swiper-pagination',
+                },
+            })
+        },
+  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';
+    }
+
+    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';
     }
   }
 }
@@ -209,6 +375,74 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   
+ .swiper-wrapper {
+        width: 50%;
+    }
+    //设置中间图片与左右图片的大小问题
+  .swiper-slide-prev, .swiper-slide-next {
+        transform: scale(1)
+  }
+  .swiper-container{
+    width: 315px;
+    height: 125px;
+    // border: solid 1px red;
+    margin-bottom: 100px;
+    margin-left: 33px;
+  }
+   
+   .new {
+     width: 315px;
+     height: 180px;
+     //border: solid 1px red;
+    margin-bottom: 100px;
+    margin-left: 33px;
+   }
+
+  .new1{
+    width: 180px;
+    height: 250px;
+   // border:solid 1px red;
+    margin-bottom: 100px;
+    margin-left: 40px;
+  }
+
+  .new2{
+    width: 220px;
+    height: 125px;
+   // border: solid 1px red;
+  }
+  .new3{
+    width:150px;
+    height: 20px;
+    font-size: 11px;
+  //  border: solid 1px red;
+    margin-left: 20px;
+    margin-top: -30px;
+  }
+  .new4{
+    width: 130px;
+    border: solid 1px black;
+    margin-left: 20px;
+    margin-top: 10px;
+    background-color: black;
+  }
+
+  .new5{
+    width: 150px;
+    height: 20px;
+  //  border: solid 1px red;
+    margin-left: 20px;
+    margin-top: 10px;
+    font-size: 11px;
+  }
+  .new6{
+    width:150px;
+    height: 160px;
+    border:solid 1px red;
+    margin-left: 20px;
+    margin-top: 5px;
+  }
+  
 .phone{
    margin-top: -490px;
    margin-right: 670px;
@@ -217,7 +451,7 @@ export default {
    height: 750px;
    background: url(../../assets/img/phone.png) 50% no-repeat;
   }
-
+  
  .time{
    width: 34px;
    height: 20px;
@@ -259,13 +493,13 @@ export default {
  }
  .mint-swipe-item{
    &:nth-child(1){
-     background-color: red;
+     background-color: white;
    }
    &:nth-child(2){
-     background-color: blue;
+     background-color: white;
    }
    &:nth-child(3){
-     background-color: cyan;
+     background-color: white;
    }
  }
 
@@ -312,7 +546,16 @@ export default {
     margin-left: 35px;
     margin-top: -100px;
     margin-bottom: 100px;
+  }
 
+  .box5{
+    width: 320px;
+    height: 6px;
+    border: 1px;
+    background-color:  rgba(204, 204, 204, 1);
+    margin-left: 35px;
+    margin-top: -95px;
+    margin-bottom: 100px;
   }
  //名医列表
    .list{
@@ -490,11 +733,34 @@ export default {
    .yyjj{
      font-size: 14px;
      width: 320px;
-     height: 100px;
+     height: 210px;
      border: 1px;
      margin-left: 35px;
      margin-top: 8px;
-     margin-bottom: 100px;
+     margin-bottom: 100px;    
+   }
+
+   .yycontent{
+     overflow: hidden;
+     text-overflow: ellipsis;
+     display: -webkit-box;
+     -webkit-line-clamp: 6;
+     -webkit-box-orient: vertical   
+   }
+   .xxcontent{
+     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: 2;
+     -webkit-box-orient: vertical   
    }
 
    .kejsfont{
@@ -529,6 +795,26 @@ export default {
      margin-bottom: 100px;
    }
 
+   .ljtp3{
+     width: 20px;
+     height: 20px;
+     border: 1px;
+     background: url(../../assets/img/u216.png) 50% no-repeat;
+     margin-left: 315px;
+     margin-top: -120px;
+     margin-bottom: 10px;
+   }
+
+    .ljtp4{
+     width: 20px;
+     height: 20px;
+     border: 1px;
+     background: url(../../assets/img/u216.png) 50% no-repeat;
+     margin-left: 315px;
+     margin-top: -120px;
+     margin-bottom: 10px;
+   }
+
    .xiangqing{
      position: absolute;
      width: 313px;
@@ -556,7 +842,7 @@ export default {
      border:1px;
      margin-top: -90px;
      margin-left: 33px;
-     margin-bottom: 200px;
+     margin-bottom: 100px;
    }
 
     .ketp2{
@@ -604,11 +890,11 @@ export default {
 
    .kejj{
      width: 320px;
-     height: 100px;
+     height: 210px;
      border:1px;
      font-size: 14px;
      margin-bottom: 100px;
-     margin-top: -195px;
+     margin-top: -88px;
      margin-left: 33px;
    }
 

src/utils/directives.js

@@ -0,0 +1,74 @@
+import Vue from 'vue'
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cursor = 'move'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})
+
+// v-dialogDragWidth: 弹窗宽度拖大 拖小
+Vue.directive('dialogDragWidth', {
+  bind(el, binding, vnode, oldVnode) {
+    const dragDom = binding.value.$el.querySelector('.el-dialog')
+
+    el.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - el.offsetLeft
+
+      document.onmousemove = function(e) {
+        e.preventDefault() // 移动时禁用默认事件
+
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        dragDom.style.width = `${l}px`
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})