zls

src/App.vue

       </div>
     </div>
     <div class="page-footer" style="background-color:#1b1b1b">
-      <p class="footer-p" style="color:rgb(255,255,255)">Copyright © 2019 FOYO All rights reserved.</p>
+      <p class="footer-p" style="color:rgb(255,255,255)">Copyright © 2020 FOYO All rights reserved. 苏ICP备19049305号-1</p>
     </div>
   </div>
 </template>
 
 <script>
 import ClickContact from "@/components/ClickContact.vue";
+import { isMobilePhone } from '../utils'
 
 export default {
   data () {
       key: 1,
       navdrawer: false,
       direction: 'rtl',
+      isMobilePhone
     }
   },
 

src/components/Business.vue

 <template>
   <div class="business">
-    <div v-if="show" class="st">
+    <div v-if="show && !isMobilePhone" class="st">
       <div class="swiper-father">
         <div class="swiper-container swiper-list" style="width: 100%">
           <div class="swiper-wrapper">
       </div>
     </div>
 
-    <div v-if="!show" class="row st">
+    <div v-else class="row st">
       <div class="col-xs-6 col-md-3 sw" v-for="(item,index) in service" :key="index">
         <img :src="item.serviceImageUrl" width="100%" height="100%" alt="..." />
         <div class>
 import "swiper/dist/css/swiper.min.css";
 import request from '../../utils/request'
 import apis from '../config/api';
+import { isMobilePhone } from '../../utils'
 
 export default {
   name: "business",
   data () {
     return {
       show: false,
-      service: []
+      service: [],
+      isMobilePhone
     };
   },
   components: {},

src/components/CaseCard.vue

         margin: 0;
         padding: 0;
         font-weight: 400;
-        font-size: 3rem;
+        
+        font-size: 2.4rem;
         color: #000;
         line-height: 1.2em;
       }
       text-decoration: none !important;
       .caption {
         font-size: 2rem;
-        color: #727171;
+        color: #595757;
 
         line-height: 1.2em;
         margin-top: 6px;
     .body {
       padding: 0.3rem 1rem;
       text-align: left;
-height: 7.9vw;
+// height: 7.9vw;
       h3 {
         margin: 0;
         padding: 0;
         font-weight: 400;
-        font-size: 2.7vw;
+        font-size: 13px;
         color: #000;
-        line-height: 4.2vw;
+        line-height: 17px;
       }
 
       .caption {
-        font-size: 1.9vw;
-        color: #727171;
-        line-height: 2.7vw;
+        font-size: 10px;
+        color: #595757;
+        line-height: 13px;
       }
     }
   }
         margin: 0;
         padding: 0;
 
-        font-size: 2.1rem;
+        font-size: 20px;
 
         line-height: 0.84em;
       }
       text-decoration: none !important;
       .caption {
-        font-size: 1.4rem;
+        font-size: 1.7rem;
 
         line-height: 0.84em;
-        margin-top: 4.2px;
+        margin-top: 10px;
       }
     }
   }

src/components/ClickContact.vue

   }
   h1{
     font-size: 2.4rem;
-    margin-bottom: 40px;
+    margin-bottom: 80px;
   }
 
   .contact-1 .contact-main {

src/components/Navbars.vue

           </div>
         </el-row>
         <el-col :span="24" class="a">
-          <button type="button" class="btn rebtn" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
+          <button type="button" class="btn rebtn" @click="navdrawer = false" style="color:black;font-size: 24px;">继续浏览</button>
         </el-col>
       </div>
     </el-drawer>
     }
   },
   mounted () {
-    this.routepath = this.$route.path;
-    // console.log(this.routepath);
+    const routepath = this.$route.path;
+    // /e/.test("The best things in life are free!")
+    if(/case/.test(routepath)){
+      this.routepath = '/case';
+      // console.log(this.routepath);
+    }else if(/share/.test(routepath)){
+     
+      this.routepath = '/Share';
+      // console.log(this.routepath);
+    
+    }else{
+      this.routepath = routepath;
+      // console.log(this.routepath);
+    }
+    
   },
 
 

src/components/Wheelplanting.vue

       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(url,index) in blogs" :key="index+'url'">
           <div class="size">
-            <router-link :to="{ name: 'details', params: { id: url.link }}" v-if="url.link" class="routelink">
+            <router-link :to="{ name: 'details', params: { type: url.type=='movement'?'share':'case', id: url.link }}" v-if="url.link" class="routelink">
            <img class="imgrul" :src="url.imageUrl" style="object-fit: cover" />
           </router-link>
             <img v-else class="imgrul" :src="url.imageUrl" style="object-fit: cover"/>

src/router.js

       component: () => import(/* webpackChunkName: "Contact" */ './views/Contact.vue')
     },
     {
-      path: '/details/:id',
+      path: '/:type/details/:id',
       name: 'details',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route

src/views/About.vue

         <div class>
           <div class="sssss">
             <p class="text-left">
-              南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
+              南京福予文化传媒有限公司成立于2018年，是一家以服务与品质为本的广告创意公司，拥有多元化的团队体系及全案服务能力。从品牌策略到营销策划，从广告创意到落地执行，一站式解决客户所需。
             </p>
             <br />
             <div class>
                 职业广告人；
                 <br />丰富的产品推广及活动策划经验；
                 <br />江苏省省级政府项目主策划；
-                <br />带领团队服务于华为，渣打（中国总部），德勤（中国）等重要项目。
+                <br />带领团队服务于华为、渣打（中国总部）、德勤（中国）等重要项目。
               </p>
             </div>
           </div>

src/views/Case.vue

     <Navbars></Navbars>
     <div class="top"></div>
     <div>
-      <img class="coverimg" :style="{background: `url(${cover.coverImg})`}" />
+      <img class="coverimg" :src="cover.coverImg"  />
       <!-- width="100%" height="300"> -->
     </div>
 
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;width:140px;padding-left:0;padding-right:0;font-weight:bold">{{currentTypeName}}</el-button>
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="z-index: 50; margin-left: 16px;width:140px;padding-left:0;padding-right:0;font-weight:bold">{{currentTypeName}}</el-button>
       </div>
     </div>
 
             <button type="button" @click="() => filterCase()" class="btn-link" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部案例</button>
           </el-col>-->
           <el-col :span="24">
-            <van-picker class="values" :columns="columns" @cancel="drawer = false"  @confirm="onConfirm" @change="onChange"  />
+            <van-picker class="values" :columns="columns" @cancel="drawer = false" @confirm="onConfirm" @change="onChange" />
           </el-col>
           <!-- <el-col :span="24" v-for="cas in casetype" :key="cas.id"> value-key=''
          
     <div class="contanier center-block dyn-main">
       <div class="row">
         <div class="col-md-6 col-xs-6 cards" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
-          <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
-            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
+          <router-link :to="{ name: 'details', params: { type: 'case', id: item.id }}" class="routelink">
+            <case-card :thumb="(item.listImg||item.caseCoverImg)" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
           </router-link>
         </div>
       </div>
     // axios.get('http://localhost:8080/pc/caseType/list')
     request({
       ...apis.caseType.list,
+      params: { pageNum: 1, pageSize: 999 }
     })
       .then(res => {
-         this.casetype = (res.records || []).filter(x => x.type === 'case');
+        this.casetype = (res.records || []).filter(x => x.type === 'case');
         // console.log(res.records || []).filter(x => x.type === 'case')
         let type = (res.records || []).filter(x => x.type === 'case');
 
         type.map((row, index) => {
           this.columns[index + 1] = row.typeName
           this.indexs[index] = row.id
-        
+
         });
 
         //      return data.map((row, inx) => {
     //         console.log(res)
     //       },
     onChange (picker, value, index) {
-      console.log(picker);
+     
       this.value = value
       this.index = index
-      console.log(`当前值：${value}, 当前索引：${index}`);
+
     },
 
     onConfirm (value, index) {
 
       if (this.value) {
 
-        console.log(this.value, this.indexs, '111111111')
-
-this.currentTypeName = this.value
+        this.currentTypeName = this.value
 
-        this.getCaseList({ pageNum: 1, caseType: this.value=='全部案例' ? '': this.indexs[this.index-1] })
+        this.getCaseList({ pageNum: 1, caseType: this.value == '全部案例' ? '' : this.indexs[this.index - 1] })
         this.currentTypeName = this.value
-        
+
         this.drawer = false;
 
       } else {
-        console.log(caseType)
+      
         this.currentTypeName = caseType ? caseType.typeName : '全部案例'
 
         this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
   }
 }
 .coverimg {
-  width: 100%;
-  /* padding-bottom: 37px; */
-  /* height: 100%; */
+  width: 100vw;
 
-  height: 0;
-  padding-bottom: 40.3%;
-  background-size: 100% 100% !important;
+
+  height: 35.8vw;
+  z-index: 99;
+  /* padding-bottom: 35.8%;
+  background-size: 100% 100% !important; */
 }
 .btn-link {
   outline: none;

src/views/Details.vue

 
     <div class="contanier st">
       <h1 style>{{current.caseTitle}}</h1>
-      <div v-if="type=='分享'" class="row p1">
+      <div v-if="type=='分享'" class="row p1 ">
         <div class="movment col-xs-12 col-md-6">分享时间:{{date}}</div>
         <!-- <br v-if="isMobilePhone" /> -->
         <div class="movment col-xs-12 col-md-6">
-          <div v-if="current.islink==0" class="">来源:{{current.linkName}}</div>
-          <a v-if="current.islink==1" :href="current.caseLink" target="view_window" style="color:#3e3a39">来源:{{current.linkName}}</a>
+          <div v-if="!current.caseLink" class>来源:{{current.linkName}}</div>
+          <a v-if="current.caseLink" :href="current.caseLink" target="view_window" style="color:#3e3a39">来源:{{current.linkName}}</a>
         </div>
       </div>
       <div v-else class="row p1">
         <p class="col-xs-6 col-md-6 p2">所属行业：{{current.caseIndustry}}</p>
       </div>
 
-      <div class="border-top" v-html="current.content"></div>
+      <div class="border-top htmlImg" v-html="content">
+
+      </div>
 
       <div class="row zan-share" style="margin-left :0; margin-right:0">
         <div class="col-xs-6 col-md-6" style="padding 0;">
       detail: {},
       activeColor: '#000',
       isMobilePhone,
-      date: moment().format('YYYY年MM月DD日 h:mm')
+      date: moment().format('YYYY年MM月DD日 h:mm'),
+      content: ''
     }
   },
   components: {
         ...apis.case.get,
         urlData: { id },
       }).then(res => {
+
+        // ../uploadimage/
+        
         this.detail = res || {}
+        
+        let content = res.current.content.replace(/\.\.\/uploadimage/g, '/uploadimage')
 
+        this.content = content
         this.type = this.detail.current.type == 'case' ? '案例' : '分享'
         // console.log(this.detail.current, '1234')
-        console.log(this.detail, '1234')
+      
         this.url = window.location.href
         this.activeColor = '#000'
       })
     margin-bottom: 0px;
     text-align: left;
     padding-left: 15px;
+    margin:0
   }
   .p2 {
     line-height: 30px;
   h2 {
     margin-top: 64px;
     margin-bottom: 30px;
-    font-size: 2.4rem
+    font-size: 2.4rem;
   }
   .st5 {
     width: 80%;
       padding-top: 20px;
       margin-top: 2px;
       border-top: 1px solid #aaa;
+      // width: 90%;
     }
     .zan-share {
       margin-top: 30px;
   }
   .p2 {
     line-height: 55px;
-    font-size: 2.4rem
+    font-size: 2.4rem;
   }
 }
 </style>
   //     font-size: 3rem;
   //     line-height: 3.4rem;
   //   }
-   .movment {
+  .movment {
     font-size: 1.7rem;
-  
   }
   .st h1 {
     font-size: 3rem;
     }
   }
 
-  .btn1{
+  .btn1 {
     font-size: 1.7rem !important;
   }
 
   .pull-right {
     font-size: 1.7rem;
   }
- 
 }
-@media (min-width: 1550px){
-  .sharetext{
+@media (min-width: 992px) and (max-width: 1550px) {
+  .sharetext {
     font-size: 2.4rem;
-    line-height:5.8rem;
+    line-height: 5.8rem;
   }
 }
 a {
   color: #000;
 }
+</style>
+
+<style lang="less">
+.htmlImg img {
+  max-width: 100%;
+  min-width: 100px;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+}
+.htmlImg iframe {
+  max-width: 100%;
+  min-width: 100px;
+  width: 100%;
+ width: 1920px;
+   height: 1080px;
+  margin: 0 auto;
+  display: block;
+}
+.htmlImg video {
+  max-width: 100%;
+  min-width: 100px;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+}
+@media (min-width: 1550px) and (max-width: 1980px) {
+  .htmlImg iframe {
+   width: 1280px;
+   height: 720px;
+  }
+  .htmlImg video {
+   width: 1280px;
+   height: 720px;
+  }
+}
+@media (min-width: 992px) and (max-width: 1550px) {
+  .htmlImg iframe {
+   width: 900px;
+  height: 550px;
+  }
+  .htmlImg video {
+    width: 900px;
+   height: 550px;
+  }
+}
+@media (max-width: 992px) {
+  .htmlImg img {
+    background-size: contain !important;
+
+    height: auto;
+    margin: 0 auto;
+    display: block;
+    width: 90%;
+  }
+  .htmlImg iframe {
+    max-width: 100% !important;
+    min-width: 100px !important;
+    min-height: 170px !important;
+    height: 170px;
+    margin: 0 auto;
+    display: block;
+    width: 90%;
+  }
+
+  .htmlImg video {
+    background-size: contain !important;
+    max-width: 100% !important;
+    min-width: 100px !important;
+min-height: 170px !important;
+    height: 170px;
+    margin: 0 auto;
+    display: block;
+    width: 90%;
+  }
+}
 </style>

src/views/Dynamic.vue

     <div class="top"></div>
     <Navbars></Navbars>
     <div>
-      <img class="coverimg" :style="{background: `url(${cover.coverImg})`}" />
+      <img class="coverimg" :src="cover.coverImg"  />
       <!-- width="100%" height="300"> -->
     </div>
 
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;;width:140px;padding-left:0;padding-right:0;font-weight:bold">{{currentTypeName}}</el-button>
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style=" z-index: 50;margin-left: 16px;;width:140px;padding-left:0;padding-right:0;font-weight:bold">{{currentTypeName}}</el-button>
       </div>
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%" style="text-align: center;">
             <van-picker class="values" :columns="columns" @cancel="drawer = false" @confirm="onConfirm" @change="onChange" />
           </el-col>
         </el-row>
-        <button type="button" class="btn rebtn" @click="drawer = flase" style="text-align:center;color:black">确定</button>
+        <button type="button" class="btn rebtn" @click="() => filterCase()"  style="text-align:center;color:black">确定</button>
       </div>
     </el-drawer>
 
     <div class="contanier center-block dyn-main">
       <div class="row">
         <div class="col-md-6 col-xs-6 cards" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
-          <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
-            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
+          <router-link :to="{ name: 'details', params: { type:'share', id: item.id }}" class="routelink">
+            <case-card :thumb="item.listImg||item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
           </router-link>
         </div>
       </div>
     })
     request({
       ...apis.caseType.list,
+      params: { pageNum: 1, pageSize: 999 }
     })
       .then(res => {
         this.casetype = (res.records || []).filter(x => x.type === 'movement');
   },
   methods: {
     onChange (picker, value, index) {
-      console.log(picker);
+  
       this.value = value
       this.index = index
-      console.log(`当前值：${value}, 当前索引：${index}`);
+      
     },
 
     onConfirm (value, index) {
 
       if (this.value) {
 
-        console.log(this.value, this.indexs, '111111111')
 
         this.currentTypeName = this.value
 
   }
 }
 .coverimg {
-  width: 100%;
-  /* padding-bottom: 37px; */
-  /* height: 100%; */
+  width: 100vw;
+ 
 
-  height: 0;
-  padding-bottom: 40.3%;
-  background-size: 100% 100% !important;
+  height:35.8vw;
+  z-index: 90;
+  /* padding-bottom: 35.8%;
+  background-size: 100% 100% !important; */
 }
 .btn-link {
   outline: none;

src/views/Home.vue

       <div class="row">
         <div class="col-md-12" style="padding:0;width: 100%;">
           <p class="p1">
-            核心团队拥有八年以上营销策划及创业设计经验，
+            核心团队拥有十五年以上营销策划及创意设计经验，
             <br v-if="isMobilePhone" />团队能力多元化，服务体系立体化。
             <br />我们懂得多，您就更省心!
           </p>
     <div class="contanier home-case top-case">
       <div class="row home-case" style="padding:0;width: 100%;">
         <div class="col-xs-6 col-md-3 home-case" v-for="(item,index) in caselist" :key="index">
-          <router-link :to="{ name: 'details', params: { id: item.id }}">
+          <router-link :to="{ name: 'details', params: { type:'case',id: item.id }}">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
                 <div style="width: 100%">
         <div class="contanier st top-news">
           <div class="row">
             <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
-              <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
+              <router-link :to="{ name: 'details', params: {type:'share', id: item.id }}" class="routelink">
                 <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic">
                   <h3 class="text-left" style>{{item.caseTitle}}</h3>
                 </div>
               </router-link>
             </div>
-            <!-- item.caseCoverImg -->
+          
           </div>
         </div>
       </div>
   created () {
 
     //合作伙伴
-    // 
-    // console.log(isMobilePhone)
-    // axios.get('http://localhost:8080/pc/partner/list/?pageNum=1&pageSize=18')
+  
     request({
       ...apis.partner.list,
       params: { pageNum: 1, pageSize: 18 }
 
       })
 
-    // axios.get('http://localhost:8080/pc/case/case/list/?pageNum=1&pageSize=8')
-
     request({
       ...apis.case.list,
       urlData: { type: 'case' },

utils/request.js

   // const data = (rawData instanceof FormData) ? rawData : JSON.stringify(rawData)
   const token = localStorage.getItem('x-token') || ''
   const contenType = (rawData instanceof FormData) ? 'multipart/form-data' : 'application/json'
-  
   return new Promise((resolve, reject) => {
     axios({
       ...config,

vue.config.js

   devServer: {
     proxy:  {
       '/api': {
-        target: 'http://localhost:8080',
+        target: 'http://localhost:8081',
         ws: true,
         changeOrigin: true,
         pathRewrite: {'^/api': ''}