wengmenghao

jydocs-pc/src/App.vue

@@ -64,15 +64,27 @@ export default {
   }
 }
 <<<<<<< HEAD
+<<<<<<< HEAD
 .in-app{
+=======
+.in-app.docs-app{
+>>>>>>> 498fd4dc36d751d688e55949cbaa31de6285dc99
   width: 100%;
-  min-width: 1012px;
+  min-width: 1012px !important;
+  background-color: rgb(242, 242, 244) ;
   .docs-app-main{
+<<<<<<< HEAD
         width: auto!important;
         min-width: auto!important;
       }
 
 =======
+=======
+    width: auto !important;
+    min-width: auto !important;
+  }
+}
+>>>>>>> 498fd4dc36d751d688e55949cbaa31de6285dc99
 ::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 8px;
@@ -82,6 +94,9 @@ export default {
   /*滚动条里面小方块*/
   border-radius: 3px;
   background-color: #e0e0e0;
+<<<<<<< HEAD
 >>>>>>> master
+=======
+>>>>>>> 498fd4dc36d751d688e55949cbaa31de6285dc99
 }
 </style>

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

@@ -1,34 +1,34 @@
 <template>
   <div class="keep-group">
-      <div class="flex-r-c">
-          <div class="title-group flex-r-c center left">
-              <h5>{{ title }}</h5>
-          </div>
+    <div class="flex-r-c">
+      <div class="title-group flex-r-c center left">
+        <h5>{{ title }}</h5>
       </div>
-      <div class="hot-keep-group flex-r-c wrap">
-        <div class="card-item flex-r-c"  v-for="item in options" :key="item.id" @click="goContent(item)">
-          <div class="mini-img-group">
-            <img :src="item.img" alt="" @error="handleError">
-            <i :class="'el-icon-jy-' + item.type" />
+    </div>
+    <div class="hot-keep-group flex-r-c wrap">
+      <div class="card-item flex-r-c" v-for="item in options" :key="item.id" @click="goContent(item)">
+        <div class="mini-img-group">
+          <img :src="item.img" alt="" @error="handleError">
+          <i :class="'el-icon-jy-' + item.type" />
+        </div>
+        <div class="flex-c-c">
+          <div class="flex">
+            <div class="title-text van-multi-ellipsis--l2">{{ item.title }}</div>
           </div>
-          <div class="flex-c-c">
-            <div class="flex">
-              <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
-            </div>
-            <div class="money-group center left">
-              {{ item.docTags }}
-            </div>
-            <div class="flex-c-c info-text">
-              <span v-if="item.contribution">贡献者: {{item.contribution}}</span>
-              <div class="info-text-group flex-r-c center left">
-                <span v-if="item.viewTimes">{{ SetViewUnit(item.viewTimes) }}浏览</span>
-                <span v-if="item.page">共{{item.page}}页</span>
-                <span v-if="item.size">{{item.size | sizeFormatter}}</span>
-              </div>
+          <div class="money-group center left">
+            {{ item.docTags }}
+          </div>
+          <div class="flex-c-c info-text">
+            <span v-if="item.contribution">贡献者: {{ item.contribution }}</span>
+            <div class="info-text-group flex-r-c center left">
+              <span v-if="item.viewTimes">{{ SetViewUnit(item.viewTimes) }}浏览</span>
+              <span v-if="item.page">共{{ item.page }}页</span>
+              <span v-if="item.size">{{ item.size | sizeFormatter }}</span>
             </div>
           </div>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
@@ -45,6 +45,15 @@ export default {
       default: () => []
     }
   },
+  watch: {
+    options (val) {
+      if (val.length > 0) {
+        this.$nextTick(() => {
+          this.setItemwidth()
+        })
+      }
+    }
+  },
   data () {
     return {}
   },
@@ -64,6 +73,19 @@ export default {
     },
     goContent (item) {
       this.$emit('click', item)
+    },
+    setItemwidth () { // 适配嵌入工作台内
+      const bodyWidth = window.screen.width - 212 - 8
+      if (window.goTemplateData && window.goTemplateData.inIframe && bodyWidth > 1248) {
+        const itemwidth = 279 + 104 // 104是margin
+        const num = Math.floor((bodyWidth - 96) / itemwidth)
+        console.log(num)
+        const newwidth = (Math.floor((bodyWidth - 96 - (itemwidth * num)) / num)) + 279
+        var elements = document.querySelectorAll('.card-item')
+        elements.forEach(function (ele) {
+          ele.style.width = newwidth + 'px' // 设置新的宽度
+        })
+      }
     }
   }
 }
@@ -79,8 +101,10 @@ export default {
   @include diy-icon('word', 24);
   @include diy-icon('excel', 24);
   @include diy-icon('ppt', 24);
+
   .title-group {
     margin-bottom: 16px;
+
     h5 {
       color: #1D1D1D;
       font-family: Microsoft YaHei;
@@ -92,6 +116,7 @@ export default {
       margin-right: 9px;
     }
   }
+
   .card-item {
     cursor: pointer;
     justify-content: flex-start;
@@ -103,6 +128,7 @@ export default {
         color: #2ABED1;
       }
     }
+
     .money-group {
       display: block;
       margin-top: 18px;
@@ -114,6 +140,7 @@ export default {
       line-height: 22px;
       color: #999999;
     }
+
     .mini-img-group {
       flex-shrink: 0;
       position: relative;
@@ -127,23 +154,28 @@ export default {
       flex-direction: row;
       align-items: center;
       justify-content: center;
+
       img {
         width: 100%;
       }
+
       i {
         position: absolute;
         right: 0;
         bottom: 0;
       }
     }
+
     .info-text-group {
       span {
         display: inline-block;
+
         &:last-child {
           &::after {
             content: unset;
           }
         }
+
         &::after {
           content: "|";
           padding: 0 4px;
@@ -151,6 +183,7 @@ export default {
         }
       }
     }
+
     .info-text {
       font-family: Microsoft YaHei;
       font-style: normal;
@@ -159,6 +192,7 @@ export default {
       line-height: 24px;
       color: #999999;
     }
+
     .red-text {
       color: #FF3A20;
       font-family: Microsoft YaHei;
@@ -167,6 +201,7 @@ export default {
       font-size: 18px;
       line-height: 28px;
     }
+
     .title-text {
       width: 183px;
       font-family: Microsoft YaHei;
@@ -178,6 +213,7 @@ export default {
       word-wrap: break-word;
     }
   }
+
   .van-ellipsis {
     overflow: hidden;
     white-space: nowrap;
@@ -192,6 +228,7 @@ export default {
     -webkit-box-orient: vertical;
 
   }
+
   .hot-keep-group {
     .card-item {
       width: 279px;
@@ -199,4 +236,24 @@ export default {
     }
   }
 }
+
+.in-app {
+
+  // 工作台内适配
+  .hot-keep-group {
+    justify-content: flex-start !important;
+
+    @media screen and (max-width: 1248px) {
+        .card-item {
+          margin-right: 41px;
+        }
+    }
+
+    @media screen and (min-width: 1248px) {
+      .card-item {
+        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,19 +1,21 @@
 <template>
   <div class="pages--home">
       <div class="top-search-group flex-c-c center">
+        <div class="centerBox">
         <h1>剑鱼文库，上亿级文档资料库</h1>
-        <search-input @submit="goSubmit"></search-input>
+        <search-input @submit="goSubmit" :btnText="in_Iframe?'搜 索':''" :leftIconshow="in_Iframe"></search-input>
       </div>
-
+      </div>
+      <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>
             <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}" v-for="(item, index) in wordModel" :key="index">
@@ -28,16 +30,17 @@
             <div class="word-file-main">
               <div class="word-file-list" @click="goContent(item)" v-for="(item, index) in wordFileList" :key="index">
                 <div class="mini-img-group">
-                  <img :src="item.img" alt="" @error="handleError">
+                  <img :src="item.img" alt="" class="mini-img" @error="handleError">
                   <i class="word-type" :class="'el-icon-jy-' + item.type" ></i>
                   <span class="type-tag" :class="item.productType === 2 ? 'boutique' : 'free'">{{item.productType === 2 ? '付费精品' : '会员免费'}}</span>
                 </div>
                 <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>
@@ -91,10 +94,13 @@
             </div>
           </div>
       </div>
+      <div class="bottom-group">
       <selected-recommend
         :options="pageData.keep"
         @click="goContent"
       ></selected-recommend>
+      </div>
+      </div>
   </div>
 </template>
 
@@ -105,7 +111,7 @@ 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) {
   let typeStr = type
@@ -174,12 +180,16 @@ export default {
       jyPcDocMember: [], // 文库会员广告位
       docsWordList: [],
       launchActive: false,
-      canFold: false
+      canFold: false,
+      in_Iframe: false
     }
   },
   created () {
     this.pageData = recoveryPageData('jy-docs-home-page-pc')
     this.getHome()
+    if (window.goTemplateData && window.goTemplateData.inIframe) {
+      this.in_Iframe = true
+    }
   },
   mounted () {
     const contentDom = document.querySelector('.word-model-content')
@@ -206,6 +216,20 @@ export default {
     },
     hotList2 () {
       return this.pageData?.hot && this.pageData?.hot.slice(5)
+    },
+    adHeight () {
+      const setheight = vw2px(px2viewport(80, 'vw', {
+        viewportWidth: 1224,
+        unitPrecision: 3
+      }), 'px', {
+        viewportWidth: document.body.clientWidth,
+        unitPrecision: 3
+      })
+      if (setheight === '0.000px') {
+        return '80px'
+      } else {
+        return setheight
+      }
     }
   },
   methods: {
@@ -328,7 +352,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 }))
           this.$nextTick(() => {
             this.checkIsOneRow()
           })
@@ -390,6 +414,12 @@ export default {
       background-size: 100% 310px;
     }
   }
+  .page--docs--index.view_index.in-iframe {
+    .page-container {
+       background:rgb(242, 242, 244) !important;
+       background-image: none;
+    }
+}
 </style>
 <style scoped lang="scss">
   .pages--home {
@@ -403,7 +433,10 @@ export default {
     @include diy-icon('excel', 24);
     @include diy-icon('ppt', 24);
     @include diy-icon('txt', 24);
-
+    .center-contentbox{
+      padding-top: 1px;
+    margin: auto;
+  }
     .list-item {
       cursor: pointer;
       padding: 18px 0;
@@ -606,7 +639,7 @@ export default {
         font-size: 40px;
         line-height: normal;
         letter-spacing: 0px;
-        text-align: left;
+        text-align: center;
         margin: 42px 0 24px;
       }
     }
@@ -752,17 +785,89 @@ export default {
         }
       }
     }
-    .in-app{
-      .top-search-group{
-        height: 286px;
-      }
-      .word-recommend-ad-list{
-        width: 24%!important;
-      }
-      .pages--home{
-        padding-left: 18px;
-        padding-right: 18px;
+    .in-app {
+  .word-file-list{
+   height: auto !important;
+  }
+  .word-recommend-ad{
+    height: auto !important;
+  }
+  .mini-img{
+    height: auto !important;
+  }
+  .top-search-group {
+    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{
+          width: 530px;
+        }
+        .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{
+  }
+  .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;
 
+      }
     }
+  }
+}
 </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

@@ -130,7 +130,11 @@ export default {
       return subInfoArr
     },
     goCollect () {
-      this.$router.push('/')
+      // this.$router.push('/')
+      const link = this.$router.resolve({
+        path: '/'
+      })
+      location.href = link.href
     }
   }
 }
@@ -204,6 +208,7 @@ export default {
     }
   }
 }
+// 工作台内兼容
 .in-app{
   .user-d-list{
     ::v-deep{
@@ -213,7 +218,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>