兼容工作台处理。

jydocs-pc/src/App.vue

@@ -42,6 +42,9 @@ export default {
     this.getMemberInfo()
     if (window.goTemplateData && window.goTemplateData.inIframe) { // 在工作台内
       this.inIframe = true
+      window.$inIframe = true
+    } else {
+      window.$inIframe = false
     }
   },
   methods: {
@@ -66,6 +69,7 @@ export default {
 .in-app.docs-app{
   width: 100%;
   min-width: 1012px !important;
+  background-color: rgb(242, 242, 244) ;
   .docs-app-main{
     width: auto !important;
     min-width: auto !important;

jydocs-pc/src/components/Search.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="search-input">
+      <img src="@/assets/images/search.png" alt="" class="icon-search" v-if="leftIconshow">
       <el-input
+              :class="{'leftIconshow': leftIconshow}"
               placeholder="搜索文档"
               v-model="input"
               @keyup.enter.native="submitSearch('onEnter')"
               clearable>
-          <el-button @click="submitSearch('onSubmit')" slot="append" icon="el-icon-jy-search"></el-button>
+              <el-button @click="submitSearch('onSubmit')" slot="append" class="btn-text" v-if="btnText">{{btnText}}</el-button>
+          <el-button @click="submitSearch('onSubmit')" slot="append" icon="el-icon-jy-search" v-else></el-button>
       </el-input>
       <!-- <el-tabs v-model="type" v-show="tabs.length" @tab-click="submitSearch('onChangeType')">
         <el-tab-pane v-for="item in tabs" :key="item.type" :label="item.label" :name="item.type"></el-tab-pane>
@@ -18,7 +21,15 @@ import { Input, Button, Tabs, TabPane } from 'element-ui'
 export default {
   name: 'Search-Input',
   props: {
-    msg: String
+    msg: String,
+    btnText: {
+      type: String,
+      default: ''
+    },
+    leftIconshow: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     [Input.name]: Input,
@@ -28,7 +39,7 @@ export default {
   },
   data () {
     return {
-      input: '',
+      input: ''
       // type: '全部',
       // tabs: []
     }
@@ -62,6 +73,7 @@ export default {
 
 <style scoped lang="scss">
   .search-input {
+    position: relative;
       width: 640px;
       margin: 0 auto;
       @include diy-icon('search', 24);
@@ -117,5 +129,22 @@ export default {
             margin-top: -4px;
           }
       }
+      .btn-text{
+        font-size: 16px;
+        color: #fff;
+      }
+      .leftIconshow{
+        ::v-deep .el-input__inner {
+       padding-left: 44px;
+      }
+      }
+      .icon-search{
+        position: absolute;
+        left: 16px;
+        top: 11px;
+        width: 20px;
+        height: 20px;
+        z-index: 10;
+      }
   }
 </style>

jydocs-pc/src/components/SelectedRecommend.vue

@@ -199,13 +199,21 @@ export default {
     }
   }
 }
-.in-app{
+.in-app{ // 工作台内适配
   .hot-keep-group{
     justify-content: flex-start !important;
+    @media screen and (max-width: 1248px) {
+    .word-recommend-ad-list {
+      .card-item{
+         margin-right: 45px;
+      }
+    }
+  }
+  @media screen and (min-width: 1248px) {
     .card-item{
-      margin-right: 45px;
+      margin-right: 104px;
     }
-
+  }
   }
 }
 </style>

jydocs-pc/src/utils/globalFunctions.js

@@ -40,11 +40,11 @@ export function addConfusionForBank (v) {
 export const debounce = (func, delay = 200, immediate) => {
   let timer = null
   return function () {
-    let context = this
-    let args = arguments
+    const context = this
+    const args = arguments
     if (timer) clearTimeout(timer)
     if (immediate) {
-      let doNow = !timer
+      const doNow = !timer
       timer = setTimeout(function () {
         timer = null
       }, delay)
@@ -60,7 +60,7 @@ export const debounce = (func, delay = 200, immediate) => {
 }
 
 // 获取url参数
-export function getParam(name) {
+export function getParam (name) {
   let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
   let r = window.location.search.substr(1).match(reg)
   let context = '' // eslint-disable-line no-unused-vars
@@ -73,7 +73,6 @@ export function getParam(name) {
     : context
 }
 
-
 // 金额处理
 // 分转元
 export function fen2Yuan (v) {
@@ -220,10 +219,10 @@ export function dateFormatter (date, fmt = 'yyyy-MM-dd HH:mm:ss') {
 }
 
 // 金额类型转换
-export function moneyUnit(m, type = 'string', lv = 0) {
+export function moneyUnit (m, type = 'string', lv = 0) {
   const mUnit = {
     levelArr: ['元', '万', '亿', '万亿'],
-    test(num, type, lv) {
+    test (num, type, lv) {
       if (num === 0) {
         if (type === 'string') {
           return '0元'
@@ -242,7 +241,7 @@ export function moneyUnit(m, type = 'string', lv = 0) {
         }
       }
 
-      let result = num / Math.pow(10000, lv)
+      const result = num / Math.pow(10000, lv)
 
       if (result >= 10000 && lv < 2) {
         return this.test(num, type, lv + 1)
@@ -288,7 +287,7 @@ export function moneyUnit(m, type = 'string', lv = 0) {
       }
     },
     // 需要传入固定的lv（此时lv为 levelArr 中的一个）
-    transfer(num, lvString) {
+    transfer (num, lvString) {
       const index = this.levelArr.indexOf(lvString)
       if (index === -1 || index === 0) {
         return num
@@ -340,14 +339,13 @@ export function scrollTargetView (targetEvent) {
     targetTop = document.querySelector(targetEvent)?.offsetTop
     // 因浏览器及模式差异,页面滚动元素存在不同（标准模式：document.documentElement；兼容模式：body）
     // scrollingElement可获取页面滚动元素
-    console.log(targetTop, 'targetTop');
+    console.log(targetTop, 'targetTop')
     scrollWrapper = document.scrollingElement
     scrollWrapper.scrollTop = targetTop
     // console.log(`非工作桌面---滚动元素：${scrollWrapper.className ? scrollWrapper.className : scrollWrapper.tagName}, 滚动距离：${targetTop}`)
   }
 }
 
-
 // 时间戳转换 多少秒、多少分、多少小时前、多少天前  超出10天显示年月日
 // 传入一个时间戳
 export function dateFromNow (timestamp) {
@@ -505,3 +503,72 @@ export function replaceKeyword (value, oldChar, newChar) {
 export function recoveryPageData (key, defaultValues = []) {
   return sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key) || '') : defaultValues
 }
+/**
+ * 该函数用于将Px换算为Vw
+ * @param {string | number} px 设计图中元素尺寸
+ * @param {string} viewportUnit 转换后单位，默认vw
+ * @param {object} config  px2viewport配置项
+ * @param {number} config.viewportWidth 设计图尺寸
+ * @param {number} config.unitPrecision 转换后保留位数
+ * @returns {string} 转换后结果
+ */
+export function px2viewport (
+  px,
+  viewportUnit = 'vw',
+  config = {
+    viewportWidth: 375,
+    unitPrecision: 3
+  }
+) {
+  try {
+    return (
+      ((String(px).replace('px', '') / config.viewportWidth) * 100).toFixed(
+        config.unitPrecision
+      ) + viewportUnit
+    )
+  } catch (e) {
+    return ''
+  }
+}
+
+/**
+ * 该函数用于将Vw换算为Px
+ * @param {string | number} vw 元素vw尺寸
+ * @param {string} viewportUnit 转换后单位，默认px
+ * @param {object} config  px2viewport配置项
+ * @param {number} config.viewportWidth 屏幕尺寸
+ * @param {number} config.unitPrecision 转换后保留位数
+ * @returns {string} 转换后结果
+ */
+export function vw2px (
+  vw,
+  viewportUnit = 'px',
+  config = {
+    viewportWidth: document.body.clientWidth || 375,
+    unitPrecision: 3
+  }
+) {
+  try {
+    return (
+      ((String(vw).replace('vw', '') * config.viewportWidth) / 100).toFixed(
+        config.unitPrecision
+      ) + viewportUnit
+    )
+  } catch (e) {
+    return ''
+  }
+}
+
+/**
+ * 该函数用于将设计图Px换算为实际渲染Px
+ * @param {string | number} px 设计图px
+ * @param {string} viewportUnit 转换后单位，默认px
+ * @returns {string} 转换后结果
+ */
+export function px2px (px, viewportUnit = 'px') {
+  try {
+    return vw2px(px2viewport(px), viewportUnit)
+  } catch (e) {
+    return ''
+  }
+}

jydocs-pc/src/views/Home.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="pages--home">
     <div class="top-search-group flex-c-c center">
-      <h1>剑鱼文库，上亿级文档资料库</h1>
-      <search-input @submit="goSubmit"></search-input>
+      <div class="centerBox">
+        <h1>剑鱼文库，上亿级文档资料库</h1>
+        <search-input @submit="goSubmit" :btnText="in_Iframe?'搜 索':''" :leftIconshow="in_Iframe"></search-input>
+      </div>
     </div>
     <div class="group-content">
       <div class="center-contentbox">
       <div class="new-group">
-        <div class="flex-r-c">
+        <div class="new-list-group must-bottom">
+          <div class="top-list-group">
+          <div class="flex-r-c">
           <div class="title-group flex-r-c center left">
             <h5 style="font-size: 24px;line-height: 36px;">热门文档</h5>
             <!-- <i class="el-icon-jy-Frame"></i> -->
           </div>
         </div>
-
-        <div class="new-list-group must-bottom">
           <div class="word-model">
             <div class="word-model-content" :class="{ 'launch-alone': !launchActive }">
               <div class="word-model-list" @click="onSetWordModel(item)" :class="{ 'active': item.active }"
@@ -37,9 +39,10 @@
               <div class="word-file-name">{{ item.title }}</div>
             </div>
           </div>
+        </div>
           <!-- 文库会员广告位 -->
-          <div class="word-file-ad" v-if="jyPcDocMember && jyPcDocMember.length">
-            <el-carousel height="80px">
+          <div class="word-file-ad" v-if="jyPcDocMember && jyPcDocMember.length" :style="{height: in_Iframe?adHeight:'80px'}">
+            <el-carousel :height="in_Iframe?adHeight:'80px'">
               <el-carousel-item v-for="(item, index) in jyPcDocMember" :key="index">
                 <img @click.prevent="onDocLink(item)" :src="item.s_pic" :alt="item.s_remark">
               </el-carousel-item>
@@ -94,7 +97,9 @@
           </div>
         </div>
       </div>
-      <selected-recommend :options="pageData.keep" @click="goContent"></selected-recommend>
+      <div class="bottom-group">
+        <selected-recommend :options="pageData.keep" @click="goContent"></selected-recommend>
+      </div>
     </div>
     </div>
   </div>
@@ -107,9 +112,9 @@ import SelectedRecommend from '@/components/SelectedRecommend.vue'
 import { getHomeHot, getSearchTag } from '../api/modules/home'
 import { getJyAdListApi } from '../api/modules/publicapply'
 import { getRecommend } from '../api/modules/search'
-import { recoveryPageData } from '../utils'
+import { recoveryPageData, vw2px, px2viewport } from '../utils'
 
-function checkType(type) {
+function checkType (type) {
   let typeStr = type
   switch (type) {
     case 1: {
@@ -140,7 +145,7 @@ function checkType(type) {
   return typeStr
 }
 
-function formatData(v) {
+function formatData (v) {
   return {
     img: v?.docImg || v?.previewImgId,
     type: checkType(v?.docFileType),
@@ -166,7 +171,7 @@ export default {
     [CarouselItem.name]: CarouselItem,
     SelectedRecommend
   },
-  data() {
+  data () {
     return {
       fullscreenLoading: false,
       pageData: {},
@@ -175,14 +180,20 @@ export default {
       jyPcDocRecommend: [], // 文库推荐广告位
       jyPcDocMember: [], // 文库会员广告位
       docsWordList: [],
-      launchActive: false
+      launchActive: false,
+      in_Iframe: false
     }
   },
-  created() {
+  created () {
     this.pageData = recoveryPageData('jy-docs-home-page-pc')
     this.getHome()
   },
-  mounted() {
+  beforeMount () {
+    if (window.$in_Iframe) {
+      this.in_Iframe = window.$in_Iframe
+    }
+  },
+  mounted () {
     const contentDom = document.querySelector('.word-model-content')
     // 获取contentDom元素高度
     const contentHeight = contentDom.clientHeight
@@ -196,24 +207,33 @@ export default {
     sessionStorage.setItem('jy-docs-home-page-pc', JSON.stringify(this.pageData))
   },
   computed: {
-    newList1() {
+    newList1 () {
       return this.pageData?.new && this.pageData?.new.slice(0, 5)
     },
-    newList2() {
+    newList2 () {
       return this.pageData?.new && this.pageData?.new.slice(5)
     },
-    hotList1() {
+    hotList1 () {
       return this.pageData?.hot && this.pageData?.hot.slice(0, 5)
     },
-    hotList2() {
+    hotList2 () {
       return this.pageData?.hot && this.pageData?.hot.slice(5)
+    },
+    adHeight () {
+      return vw2px(px2viewport(80, 'vw', {
+        viewportWidth: 1224,
+        unitPrecision: 3
+      }), 'px', {
+        viewportWidth: document.body.clientWidth,
+        unitPrecision: 3
+      })
     }
   },
   methods: {
-    handleError(img) {
+    handleError (img) {
       img.target.src = require('../assets/images/error.png')
     },
-    goContent(item) {
+    goContent (item) {
       const routeData = this.$router.resolve({
         name: 'content',
         params: {
@@ -222,7 +242,7 @@ export default {
       })
       window.open(routeData.href, '_blank')
     },
-    onSetWordModel(data) {
+    onSetWordModel (data) {
       this.wordModel.forEach(v => {
         v.active = false
       })
@@ -242,7 +262,7 @@ export default {
       }
     },
     // 获取文件列表
-    async getSearchEvent(type, callBack) {
+    async getSearchEvent (type, callBack) {
       let params = {
         tag: type,
         sort: 'vSort',
@@ -267,7 +287,7 @@ export default {
         }
       })
     },
-    setLocalData(tag, list) {
+    setLocalData (tag, list) {
       const foundItem = this.docsWordList.find(item => item['word-name-' + tag] !== undefined)
       if (foundItem) {
         // 如果找到，则更新该项
@@ -282,7 +302,7 @@ export default {
       // 存储更新后的列表到sessionStorage
       sessionStorage.setItem('jy-docs-word-list', JSON.stringify(this.docsWordList))
     },
-    getLocalData(tag) {
+    getLocalData (tag) {
       // 优先取本地数据，无数据时返回一个空数组
       try {
         const jyDocsWordList = sessionStorage.getItem('jy-docs-word-list')
@@ -298,7 +318,7 @@ export default {
       // 如果没有找到数据或解析出错，返回一个空数组
       return []
     },
-    async getHome() {
+    async getHome () {
       // getSearch({ productType: 1, sort: 'vSort', num: 1, size: 10 }).then(res => {
       //   if (!res.data.error_msg.length) {
       //     this.$set(this.pageData, 'new', res.data.data.list.map((v) => formatData(v)))
@@ -313,7 +333,7 @@ export default {
       getSearchTag().then(data => {
         const res = data.data
         if (res && res.error_code === 0) {
-          this.wordModel = res.data.map((item, index) => ({ value: item, active: index === 0 ? true : false }))
+          this.wordModel = res.data.map((item, index) => ({ value: item, active: index === 0 }))
           const localList = this.getLocalData(this.wordModel[0].value)
           if (localList && localList.length) {
             this.wordFileList = localList.map((v) => formatData(v))
@@ -340,12 +360,12 @@ export default {
         this.$set(this.pageData, 'keep', res.data.list.map((v) => formatData(v)))
       })
     },
-    onDocLink(item) {
+    onDocLink (item) {
       if (item.s_link) {
         window.open(item.s_link, '_blank')
       }
     },
-    goSubmit(search) {
+    goSubmit (search) {
       if (!search.text.replace(/\s+/g, '')) {
         return
       }
@@ -375,6 +395,7 @@ export default {
 .page--docs--index.view_index.in-iframe {
     .page-container {
        background:rgb(242, 242, 244) !important;
+       background-image: none;
     }
 }
 </style>
@@ -392,11 +413,9 @@ export default {
   @include diy-icon('txt', 24);
 
   .group-content {
-    background-color: #fff;
     padding-top: 1px;
   }
   .center-contentbox{
-    max-width: 1200px;
     margin: auto;
   }
 
@@ -536,9 +555,7 @@ export default {
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-
   }
-
   .hot-keep-group {
     .card-item {
       width: 279px;
@@ -728,7 +745,6 @@ export default {
       border-radius: 8px;
       overflow: hidden;
       cursor: pointer;
-
       &>img {
         width: 100%;
         height: 100%;
@@ -787,22 +803,82 @@ export default {
 }
 
 .in-app {
+  .word-file-list{
+   height: auto;
+  }
+  .word-recommend-ad{
+    height: auto;
+  }
   .top-search-group {
-    height: 286px;
-    background-image: url("~@/assets/images/wenkuBanner.png");
+    height: 136px;
+    // background-image: url("~@/assets/images/wenkuBanner.png");
+    background-image: none;
+    background: linear-gradient(180deg, #B7F0FB 0%, #D5E8FF 100%);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    border-radius: 8px;
+    .centerBox{
+      width: 988px;
+      height: 100%;
+      margin: 0 auto;
+      background-image: url("~@/assets/images/wkbg.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      ::v-deep{
+        .search-input .el-input__inner{
+          border-radius: 8px 0 0 8px;
+          border: none;
+        }
+        .search-input .el-input-group__append{
+          border-radius: 0 8px 8px 0;
+
+        }
+
+      }
+    }
+    h1{
+      margin: 22px 0 16px;
+      font-size: 24px;
+      line-height: 36px;
+    }
+  }
+  .new-group{
+    margin-top: 0;
+    .top-list-group{
+      padding: 24px;
+      margin-top: 24px;
+      background-color: #fff;
+      border-radius: 8px;
+    }
+     .word-file-ad{
+      margin-top: 24px;
+     }
+     .word-recommend-ad{
+      margin-top: 24px;
+     }
+  }
+  .hot-down-group{
+    margin-top: 24px;
   }
   .center-contentbox{
-    padding: 0 18px;
   }
+  .word-recommend-ad-list {
+    width: 24% !important;
+  }
+  .bottom-group{
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 24px;
+    margin-top: 24px;
+    ::v-deep{
+      .keep-group{
+        margin-top: 0;
+        padding-bottom: 0;
 
-  @media screen and (max-width: 1460px) {
-    .word-recommend-ad-list {
-      width: 24% !important;
+      }
     }
   }
-
 }
 </style>

jydocs-pc/src/views/Search.vue

@@ -373,4 +373,12 @@ export default {
     text-align: right;
   }
 }
+.in-app{
+  .search-container{
+    background-color: #fff;
+    border-radius: 8px;
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+}
 </style>

jydocs-pc/src/views/UserCollections.vue

@@ -204,6 +204,7 @@ export default {
     }
   }
 }
+// 工作台内兼容
 .in-app{
   .user-d-list{
     ::v-deep{
@@ -213,7 +214,17 @@ export default {
     }
   }
   .user-collections{
+  //  padding: 0 18px;
+  background-color: rgb(242, 242, 244) ;
+  .user-collections-header{
+    padding-top: 0;
+  }
+  .user-collections-content{
+    background-color: #fff;
+    margin-top: 16px;
+    border-radius: 8px;
     padding: 0 18px;
   }
+  }
 }
 </style>

jydocs-pc/src/views/UserDocs.vue

@@ -409,7 +409,23 @@ export default {
     }
   }
   .user-docs{
-    padding: 0 18px;
+    // padding: 0 18px;
+    background-color: rgb(242, 242, 244) ;
+    .user-docs-header{
+      padding-top: 0;
+    }
+    .user-docs-content{
+      padding: 24px;
+      background-color: #fff;
+      margin-top: 16px;
+      border-radius: 8px;
+    }
+    .keep-group{
+      padding: 24px;
+      background-color: #fff;
+      margin-top: 16px;
+      border-radius: 8px;
+    }
   }
 }
 </style>