comit

src/assets/styles/var.scss

@@ -3,4 +3,5 @@ $theme-color:#0052D9;//主题色
 $font-grey:#666666;
 $font-grey_999:#999;
 $border-color:#DCDFE6;
-$theme-red:#C54322;
+$theme-red:#C54322;
+$media-width:650px;

src/hooks/useDownLoadFile.js

@@ -0,0 +1,6 @@
+// 下载文件
+import axios from "axios";
+
+export function useDownLoadFile(url){
+    
+}

src/style.css

@@ -1,89 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/views/ppt/Detail.vue

@@ -35,7 +35,7 @@ function onResize({width,height}){
     const scale=width/900
     const el=document.getElementsByClassName('ppt-content-wrap')[0]
     if(!el) return
-    pptContentHeight.value=height*scale
+    pptContentHeight.value=height*scale+60
     el.style.transform=`scale(${scale})`
 }
 
@@ -89,10 +89,51 @@ function onSelectPlayOpt(e){
     })
 }
 
+// 下载文件
+function handleDownLoadFile(){
+    const a = document.createElement('a');
+	a.style.display = 'none';
+	    //   a.setAttribute('target', '_blank');
+	      /*
+	       * download的属性是HTML5新增的属性
+	       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
+	       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
+	       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
+	       */
+	    a.setAttribute('download','测试');
+	      a.href = PPTInfo.value.PptxUrl;
+	      document.body.appendChild(a);
+	      a.click();
+	      document.body.removeChild(a);
+}
+
 </script>
 
 <template>
     <div class="ppt-detail-page" :style="{height:pptContentHeight+'px'}">
+        <!-- pad端顶部操作栏 -->
+        <div class="pad-top-action-wrap">
+            <div class="item-box" @click="handllePublishPPT">
+                <img src="@/assets/imgs/ppt/icon_action_publish.png" alt="">
+                <span>发布</span>
+            </div>
+            <div class="item-box" @click="showPlayOpt=true">
+                <img src="@/assets/imgs/ppt/icon_action_play.png" alt="">
+                <span>播放</span>
+            </div>
+            <div class="item-box" @click="handleShowPPTCopy({pptid:$route.query.id})">
+                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+                <span>复制</span>
+            </div>
+            <div class="item-box">
+                <img src="@/assets/imgs/ppt/icon_action_download2.png" alt="">
+                <span>下载</span>
+            </div>
+            <div class="item-box red" @click="handlePPTDel({back:true})" v-if="!PPTOptState.isCommon">
+                <img src="@/assets/imgs/icon_del.png" alt="">
+                <span>删除</span>
+            </div>
+        </div>
         <div class="ppt-content-wrap" v-element-size="onResize">
             <template v-for="(item,index) in conArr" :key="item.id">
                 <component 
@@ -149,7 +190,7 @@ function onSelectPlayOpt(e){
                 </div>
                 
             </div>
-            <div class="item border blue">
+            <div class="item border blue" @click="handleDownLoadFile">
                 <img src="@/assets/imgs/ppt/icon_action_download.png" alt="">
                 <span>下载</span>
             </div>
@@ -189,6 +230,8 @@ function onSelectPlayOpt(e){
 <style lang="scss" scoped>
 .ppt-detail-page{
     width: 100%;
+    position: relative;
+    overflow: hidden;
     .ppt-content-wrap{
         width: 100%;
         position: absolute;
@@ -281,4 +324,65 @@ function onSelectPlayOpt(e){
         min-width: 150px;
     }
 }
+.pad-top-action-wrap{
+    display: none;
+}
+
+@media screen and (min-width:$media-width){
+    .ppt-detail-page{
+        margin-top: 60px;
+    }
+    .mobile-fix-bot-warp{
+        display: none;
+    }
+    .pad-top-action-wrap{
+        display: flex;
+        position: fixed;
+        top: 60px;
+        left: 0;
+        right: 0;
+        z-index: 999;
+        height: 60px;
+        background-color: #fff;
+        padding-left: 34px;
+        .item-box{
+            height: 100%;
+            // flex: 1;
+            margin-right: 43px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            img{
+                width: 20px;
+            }
+            span{
+                font-size: 16px;
+            }
+            
+        }
+        .red{
+            color: $theme-red;
+        }
+    }
+    .ppt-copy-wrap{
+        padding: 50px 30px;
+        span{
+            flex-shrink: 0;
+            margin-right: 10px;
+        }
+        :deep(.van-popover__wrapper){
+            flex: 1;
+        }
+        .select-value-box{
+            display: block;
+            height: 40px;
+            line-height: 40px;
+            padding: 0 30px;
+            border-radius: 70px;
+            border: 1px solid $border-color;
+            min-width: 120px;
+        }
+    }
+}
 </style>

src/views/ppt/Preview.vue

@@ -53,6 +53,8 @@ function handleSwipeChange(index){
 function handleSwipeTo(index){
     swipeIns.value.swipeTo(index)
 }
+
+
 // 显示操作模块
 let showAction=ref(false)
 let timeIns=null

src/views/ppt/Search.vue

@@ -41,4 +41,16 @@ const searchVal=ref('')
         }
     }
 }
+
+@media screen and (min-width:$media-width){
+    .list-wrap{
+        padding: 30px;
+        .item{
+            padding: 10px 0;
+            .time{
+                margin-top: 10px;
+            }
+        }
+    }
+}
 </style>

src/views/ppt/components/PadPPTIndexWrap.vue

@@ -4,6 +4,9 @@ import {useClassify} from '../hooks/useClassify'
 import openShareIcon from '@/assets/imgs/ppt/ppt_icon_user1.png'
 import closeShareIcon from '@/assets/imgs/ppt/ppt_icon_user2.png'
 import {apiPPTList} from '@/api/ppt'
+import { useRouter } from 'vue-router'
+
+const router=useRouter()
 
 const {
     classifyState,
@@ -39,6 +42,11 @@ async function getPPTList(){
 }
 getPPTList()
 
+// 跳转搜索
+function goMobileSearch(){
+    router.push('/ppt/search')
+}
+
 
 </script>
 
@@ -56,7 +64,7 @@ getPPTList()
                     @click="activeType='pubPPT'"
                 >公共PPT</span>
             </div>
-            <div v-if="activeType=='myPPT'">
+            <div class="classify-list" v-if="activeType=='myPPT'">
                 <van-collapse class="level-two" v-model="classifyState.myActiveType" :border="false">
                     <van-collapse-item
                         :name="item.GroupId"
@@ -137,7 +145,7 @@ getPPTList()
                     </van-collapse-item>
                 </van-collapse>
             </div>
-            <div v-if="activeType=='pubPPT'">
+            <div class="classify-list" v-if="activeType=='pubPPT'">
                 <van-collapse class="level-two" v-model="classifyState.pubActiveType" :border="false">
                     <van-collapse-item
                         :name="item.GroupId"
@@ -271,7 +279,7 @@ getPPTList()
 }
 </style>
 <style lang="scss" scoped>
-@media screen and (min-width:650px){
+@media screen and (min-width:$media-width){
     .pad-ppt-index-wrap{
         display: flex;
         .left-classify-wrap{
@@ -295,9 +303,16 @@ getPPTList()
                     border-bottom: 2px solid $theme-color;
                 }
             }
+            .classify-list{
+                height: 80vh;
+                overflow-y: auto;
+                &::-webkit-scrollbar{
+                    display: none;
+                }
+            }
             .level-two{
                 padding-top: 20px;
-                margin-left: -20px;
+                margin-left: -15px;
             }
             .title-second{
                 display: flex;
@@ -350,12 +365,16 @@ getPPTList()
         }
         .right-list-wrap{
             flex: 1;
-            padding: 20px;
+            .search-box{
+                padding: 0 10px;
+                position: sticky;
+                top: 60px;
+            }
             .list-wrap{
                 padding: var(--van-search-padding);
                 display: flex;
                 flex-wrap: wrap;
-                justify-content: space-between;
+                justify-content: center;
                 .item{
                     display: block;
                     box-sizing: border-box;
@@ -364,6 +383,8 @@ getPPTList()
                     padding: 10px 14px;
                     border: 1px solid $border-color;
                     margin-bottom: 20px;
+                    margin-left: 10px;
+                    margin-right: 10px;
                     .bg-img{
                         width: 100%;
                         display: block;

vite.config.js

@@ -33,4 +33,7 @@ export default ({ mode }) =>
     build: {
       outDir: loadEnv(mode, process.cwd()).VITE_APP_OUTDIR,
     },
+    server:{
+      host:true
+    }
   });