ホーム エクスプローラ ヘルプ
登録 サインイン
mabaoyi
/
factoryDirector
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

冲突

mabaoyi 5 ヶ月 前
親
1b0a8ccbdb e06867b929
コミット
eff4d763ab
11 ファイル変更、865 行追加、704 行削除
分割表示 差分情報を表示
  1. 20 20
      dist/index.html
  2. BIN
      src/assets/images/return.png
  3. 2 1
      src/components/anchorPoint/index.vue
  4. 111 106
      src/view/Home/price.vue
  5. 175 99
      src/view/Home/product.vue
  6. 128 124
      src/view/handbook/bookinfo.vue
  7. 50 43
      src/view/handbook/handbook.vue
  8. 55 46
      src/view/handbook/input.vue
  9. 238 209
      src/view/video/course.vue
  10. 48 51
      src/view/video/index.vue
  11. 38 5
      src/view/video/info.vue

+ 20 - 20
dist/index.html
ファイルの表示 

@@ -1,21 +1,21 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <head>
 
-    <meta charset="UTF-8" />
 
-    <link
 
-      rel="icon"
 
-      type="image/svg+xml"
 
-      href="./src/assets/image/a8e890b2-ad35-490e-b0cc-1548d7dd1401.png"
 
-    />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>云厂长</title>
 
-    <script type="module" crossorigin src="./assets/index-DScBbrL5.js"></script>
 
-    <link rel="stylesheet" crossorigin href="./assets/index-CmXlnt-2.css">
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-  </body>
 
-</html>
 
+<!DOCTYPE html>

+<html lang="en">

+  <head>

+    <meta charset="UTF-8" />

+    <link

+      rel="icon"

+      type="image/svg+xml"

+      href="./src/assets/image/a8e890b2-ad35-490e-b0cc-1548d7dd1401.png"

+    />

+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

+    <title>云厂长</title>

+    <script type="module" crossorigin src="./assets/index-_cB-BSHh.js"></script>
 
+    <link rel="stylesheet" crossorigin href="./assets/index-CNV4glNT.css">
 
+  </head>

+  <body>

+    <div id="app"></div>


+  </body>

+</html>

 <style lang="scss">* {
 
   margin: 0;
 
   padding: 0;
 
@@ -26,7 +26,7 @@ html {
 
   margin: 0;
 
   padding: 0;
 
   border-radius: 0;
 
-  overflow-x: hidden;
 
+  overflow: hidden;
 
 }
 
 #app {
 
   width: 100%;
 
@@ -36,4 +36,4 @@ button:hover {
 
   opacity: 0.7;
 
   transform: scale(1.1, 1.1);
 
 }
 
-</style>
 
+</style>

BIN
src/assets/images/return.png
ファイルの表示


+ 2 - 1
src/components/anchorPoint/index.vue
ファイルの表示 

@@ -76,9 +76,10 @@ onMounted(() => {
 
   justify-content: space-around;
 
   align-items: center;
 
   position: fixed;
 
-  right: 360px;
 
+  right: 100px;
 
   bottom: 100px;
 
   z-index: 1000;
 
+  border-radius: 32px 32px;
 
   .advice-1 {
 
     border-radius: 32px 32px 0 0;
 
     padding-top: 10px;

+ 111 - 106
src/view/Home/price.vue
ファイルの表示 

@@ -1,115 +1,116 @@
 
 <template>
 
-  <div class="price">
 
-    <img class="img" src="../../assets/images/price_bg.png" alt="" />
 
-    <div class="content animate__animated animate__bounceInUp">
 
-      <div class="title">请根据业务场景，选择您需要的套餐</div>
 
-      <div class="tabs " >
 
-        <div class="tab ">
 
-          <div
 
-            class="item"
 
-            :class="tabs == 0 ? 'active' : ''"
 
-            @click="change(0)"
 
-          >
 
-            包月
 
+  <div class="scroll-container">
 
+    <div class="price">
 
+      <img class="img" src="../../assets/images/price_bg.png" alt="" />
 
+      <div class="content">
 
+        <div class="title">请根据业务场景，选择您需要的套餐</div>
 
+        <div class="tabs">
 
+          <div class="tab">
 
+            <div
 
+              class="item"
 
+              :class="tabs == 0 ? 'active' : ''"
 
+              @click="change(0)"
 
+            >
 
+              包月
 
+            </div>
 
+            <div
 
+              class="item"
 
+              :class="tabs == 1 ? 'active' : ''"
 
+              @click="change(1)"
 
+            >
 
+              包年
 
+            </div>
 
+            <div
 
+              class="item"
 
+              :class="tabs == 2 ? 'active' : ''"
 
+              @click="change(2)"
 
+            >
 
+              插件
 
+            </div>
 
           </div>
 
-          <div
 
-            class="item"
 
-            :class="tabs == 1 ? 'active' : ''"
 
-            @click="change(1)"
 
-          >
 
-            包年
 
+        </div>
 
+        <div class="bankuai">
 
+          <div v-if="tabs == 0" class="flex">
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.month_group"
 
+              alt=""
 
+            />
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.month_professional"
 
+              alt=""
 
+            />
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.month_enterprise"
 
+              alt=""
 
+            />
 
           </div>
 
-          <div
 
-            class="item"
 
-            :class="tabs == 2 ? 'active' : ''"
 
-            @click="change(2)"
 
-          >
 
-            插件
 
+          <div v-if="tabs == 1" class="flex">
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.year_group"
 
+              alt=""
 
+            />
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.year_professional"
 
+              alt=""
 
+            />
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.year_enterprise"
 
+              alt=""
 
+            />
 
+          </div>
 
+          <div v-if="tabs == 2" class="flex">
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.base_enhancement"
 
+              alt=""
 
+            />
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.professional_enhancement"
 
+              alt=""
 
+            />
 
+            <img
 
+              @click="dialogTableVisible2 = true"
 
+              class="image"
 
+              :src="pricea.price.enterprise_enhancement"
 
+              alt=""
 
+            />
 
           </div>
 
         </div>
 
-      </div>
 
-      <div class="bankuai">
 
-        <div v-if="tabs == 0" class="flex">
 
-          <img 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.month_group"
 
-            alt=""
 
-          />
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.month_professional"
 
-            alt=""
 
-          />
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.month_enterprise"
 
-            alt=""
 
-          />
 
-        </div>
 
-        <div v-if="tabs == 1" class="flex">
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.year_group"
 
-            alt=""
 
-          />
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.year_professional"
 
-            alt=""
 
-          />
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.year_enterprise"
 
-            alt=""
 
-          />
 
-        </div>
 
-        <div v-if="tabs == 2" class="flex">
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.base_enhancement"
 
-            alt=""
 
-          />
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.professional_enhancement"
 
-            alt=""
 
-          />
 
-          <img
 
-            @click="dialogTableVisible2 = true"
 
-            class="image"
 
-            :src="pricea.price.enterprise_enhancement"
 
-            alt=""
 
-          />
 
+        <!-- 免费获取 -->
 
+        <div class="get">
 
+          <div class="draw_font">
 
+            免费领取一对一专业顾问演示服务,助您快速了解系统功能
 
+          </div>
 
+          <div class="draw" @click="dialogTableVisible = true">免费领取</div>
 
         </div>
 
+        <!-- 功能对比 -->
 
+        <div class="Compare">各个版本功能对比</div>
 
       </div>
 
-      <!-- 免费获取 -->
 
-      <div class="get animate__animated animate__bounceInUp">
 
-        <div class="draw_font">
 
-          免费领取一对一专业顾问演示服务,助您快速了解系统功能
 
-        </div>
 
-        <div class="draw" @click="dialogTableVisible = true">免费领取</div>
 
+      <div class="content">
 
+        <img class="bigimage" :src="pricea.price.version_compare" alt="" />
 
       </div>
 
-      <!-- 功能对比 -->
 
-      <div class="Compare animate__animated animate__bounceInUp">各个版本功能对比</div>
 
-    </div>
 
-    <div class="content animate__animated animate__bounceInUp">
 
-      <img class="bigimage" :src="pricea.price.version_compare" alt="" />
 
+      <application
 
+        :titleinfo="infoa.info.scene_content"
 
+        :image="infoa.info.scene_image"
 
+      ></application>
 
+      <!-- <corporation></corporation> -->
 
+      <bottom></bottom>
 
     </div>
 
-    <application
 
-      class="animate__animated animate__bounceInUp"
 
-      :titleinfo="infoa.info.scene_content"
 
-      :image="infoa.info.scene_image"  
-    ></application>
 
-    <!-- <corporation></corporation> -->
 
-    <bottom></bottom>
 
 
     <div class="one">
 
       <el-dialog v-model="dialogTableVisible" :show-close="false">
 
@@ -129,7 +130,7 @@
 
 </template>
 
 
 <script setup>
 
-import 'animate.css';
 
+import "animate.css";
 
 import { useRouter } from "vue-router";
 
 import { onMounted, ref, reactive } from "vue";
 
 import bottom from "../../components/Layout/bottom.vue";
 
@@ -201,6 +202,11 @@ const close = () => {
 
 </script>
 
 
 <style lang="scss" scoped>
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .bigimage {
 
   width: 1200px;
 
   margin-bottom: 70px;
 
@@ -246,7 +252,6 @@ const close = () => {
 
     width: 300px;
 
     height: 300px;
 
     margin-top: 22px;
 
-    
   }
 
   .bottom_font {
 
     font-family: PingFangSC, PingFang SC;
 
@@ -350,7 +355,7 @@ const close = () => {
 
         width: 380px;
 
         box-shadow: 2px 2px 2px 0px rgba(185, 185, 185, 0.1);
 
         border-radius: 10px;
 
-        
+        cursor: pointer;
 
         // height: 900px;
 
         // cursor: pointer;
 
       }

+ 175 - 99
src/view/Home/product.vue
ファイルの表示 

@@ -1,100 +1,170 @@
 
 <template>
 
-  <!-- 产品团队 -->
 
-  <banner :banneImageList="imgList.banneImageList" />
 
-  <div v-if="index != 3" class="content animate__animated animate__bounceInUp">
 
-    <div class="fang ">
 
-      <div class="title">方案概述</div>
 
-      <div v-if="index == 0" class="top_font">
 
-        {{ tabbar.info.overview_content_group }}
 
-      </div>
 
-      <div v-if="index == 1" class="top_font">
 
-        {{ tabbar.info.overview_content_professional }}
 
-      </div>
 
-      <div v-if="index == 2" class="top_font">
 
-        {{ tabbar.info.overview_content_enterprise }}
 
-      </div>
 
-      <div class="box_item">
 
-        <div class="item" v-for="(item, idx) in overviewList.list" :key="idx">
 
-          <div class="item_title">{{ item.title }}</div>
 
-          <div class="item_font">{{ item.content }}</div>
 
+  <div class="scroll-container" @scroll="handleScroll">
 
+    <!-- 产品团队 -->
 
+    <banner :banneImageList="imgList.banneImageList" />
 
+    <div
 
+      v-if="index != 3"
 
+      class="content animate__animated animate__bounceInUp"
 
+    >
 
+      <div class="fang">
 
+        <div class="title">方案概述</div>
 
+        <div v-if="index == 0" class="top_font">
 
+          {{ tabbar.info.overview_content_group }}
 
+        </div>
 
+        <div v-if="index == 1" class="top_font">
 
+          {{ tabbar.info.overview_content_professional }}
 
+        </div>
 
+        <div v-if="index == 2" class="top_font">
 
+          {{ tabbar.info.overview_content_enterprise }}
 
+        </div>
 
+        <div class="box_item">
 
+          <div class="item" v-for="(item, idx) in overviewList.list" :key="idx">
 
+            <div class="item_title">{{ item.title }}</div>
 
+            <div class="item_font">{{ item.content }}</div>
 
+          </div>
 
+        </div>
 
+        <div class="imag">
 
+          <!-- 团队 -->
 
+          <img
 
+            v-if="index == 0"
 
+            class="imag"
 
+            :src="tabbar.info.overview_image_group"
 
+            alt=""
 
+          />
 
+          <!-- 专业 -->
 
+          <img
 
+            v-if="index == 1"
 
+            class="imag"
 
+            :src="tabbar.info.overview_image_professional"
 
+            alt=""
 
+          />
 
+          <!-- 企业 -->
 
+          <img
 
+            v-if="index == 2"
 
+            class="imag"
 
+            :src="tabbar.info.overview_image_enterprise"
 
+            alt=""
 
+          />
 
         </div>
 
-      </div>
 
-      <div class="imag">
 
-        <!-- 团队 -->
 
-        <img
 
-          v-if="index == 0"
 
-          class="imag"
 
-          :src="tabbar.info.overview_image_group"
 
-          alt=""
 
-        />
 
-        <!-- 专业 -->
 
-        <img
 
-          v-if="index == 1"
 
-          class="imag"
 
-          :src="tabbar.info.overview_image_professional"
 
-          alt=""
 
-        />
 
-        <!-- 企业 -->
 
-        <img
 
-          v-if="index == 2"
 
-          class="imag"
 
-          :src="tabbar.info.overview_image_enterprise"
 
-          alt=""
 
-        />
 
       </div>
 
     </div>
 
+    <advanta
 
+      class="animate__animated animate__bounceInUp"
 
+      :tabslist="tabbar.tabslist"
 
+      :title="index == 3 ? '三方市场插件让您的企业流程规范化' : '方案优势'"
 
+      :titleinfo="index == 3 ? '' : tabbar.info.advantage_content"
 
+    >
 
+    </advanta>
 
+    <!-- 安装增包 -->
 
+    <corporat
 
+      class="animate__animated animate__bounceInUp"
 
+      style="background: rgba(245, 249, 255, 1)"
 
+      title="按需安装增强包，减少企业成本"
 
+      :info="tabbar.info.enhancement_package_content"
 
+      v-if="index == 3"
 
+      :list="tabbar.newlist"
 
+      :ing="0"
 
+    ></corporat>
 
+    <!-- 管理平台 -->
 
+    <application
 
+      class="animate__animated animate__bounceInUp"
 
+      :titleinfo="tabbar.info.scene_content"
 
+      :image="tabbar.info.scene_image"
 
+      style="background: #ffffff"
 
+      v-if="index == 3"
 
+    ></application>
 
+    <application
 
+      class="animate__animated animate__bounceInUp"
 
+      :titleinfo="tabbar.info.scene_content"
 
+      :image="tabbar.info.scene_image"
 
+      v-else
 
+    ></application>
 
+    <!-- 客户案例 -->
 
+    <corporation
 
+      class="animate__animated animate__bounceInUp"
 
+      v-if="index != 3"
 
+      title="客户案例"
 
+      :list="tabbar.customerlist"
 
+      :ing="1"
 
+    ></corporation>
 
+    <bottom></bottom>
 
   </div>
 
-  <advantage
 
-    :tabslist="tabbar.tabslist"
 
-    :title="index == 3 ? '三方市场插件让您的企业流程规范化' : '方案优势'"
 
-    :titleinfo="index == 3 ? '' : tabbar.info.advantage_content"
 
-  >
 
-  </advantage>
 
-  <!-- 安装增包 -->
 
-  <corporation
 
-    style="background: rgba(245, 249, 255, 1)"  
-    title="按需安装增强包，减少企业成本"
 
-    :info="tabbar.info.enhancement_package_content"
 
-    v-if="index == 3"
 
-    :list="tabbar.newlist"
 
-    :ing="0"
 
-  ></corporation>
 
-  <!-- 管理平台 -->
 
-  <application
 
-    :titleinfo="tabbar.info.scene_content"
 
-    :image="tabbar.info.scene_image"
 
-    style="background: #ffffff"
 
-    v-if="index == 3"
 
-  ></application>
 
-  <application
 
-    :titleinfo="tabbar.info.scene_content"
 
-    :image="tabbar.info.scene_image"
 
-    v-else
 
-  ></application>
 
-  <!-- 客户案例 -->
 
-  <corporation
 
-    v-if="index != 3"
 
-    title="客户案例"
 
-    :list="tabbar.customerlist"
 
-    :ing="1"
 
-  ></corporation>
 
-  <bottom></bottom>
 
 </template>
 
 
 <script setup>
 
-import 'animate.css';
 
+import "animate.css";
 
 import { useRouter, useRoute } from "vue-router";
 
-import { onMounted, ref, reactive, watch } from "vue";
 
+import {
 
+  onMounted,
 
+  ref,
 
+  reactive,
 
+  watch,
 
+  onUnmounted,
 
+  defineAsyncComponent,
 
+} from "vue";
 
 import banner from "../../components/Banne/index.vue";
 
 import bottom from "../../components/Layout/bottom.vue";
 
-import application from "../../components/Application .vue";
 
+// import application from "../../components/Application .vue";
 
+// import corporat from "../../components/corporation.vue";
 
 import corporation from "../../components/corporation.vue";
 
-import advantage from "../../components/advantage/index.vue";
 
+import advanta from "../../components/advantage/index.vue";
 
 import * as productApi from "../../api/login";
 
 import * as configApi from "../../api/config";
 
 const route = useRoute();
 
+const router = useRouter();
 
 const index = ref();
 
-index.value = route.query.index;     
+index.value = route.query.index;
 
+
 
+
 
+// 创建一个响应式的 ref 来存储视口距离顶部的距离
 
+const martop = ref(0);
 
+// 监听滚动事件来更新视口距离顶部的距离
 
+const updateScrollDistance = () => {
 
+  martop.value =
 
+    window.scrollY ||
 
+    document.documentElement.scrollTop ||
 
+    document.body.scrollTop;
 
+};
 
+let advantage = ref("");
 
+let application = ref("");
 
+// let corporation = ref("");
 
+let corporat = ref("");
 
+
 
+function handleScroll(event) {
 
+  console.log("event", event.target.scrollTop);
 
+  if (event.target.scrollTop > 700 && advantage.value == "") {
 
+    advantage.value = defineAsyncComponent(() => {
 
+      return import("../../components/advantage/index.vue");
 
+    });
 
+  }
 
+  if (event.target.scrollTop > 1700 && application.value == "") {
 
+    application.value = defineAsyncComponent(() => {
 
+      return import("../../components/Application .vue");
 
+    });
 
+  }
 
+  // if (event.target.scrollTop > 2400 && corporation.value == "") {
 
+  //   corporation.value = defineAsyncComponent(() => {
 
+  //     return import("../../components/corporation.vue");
 
+  //   });
 
+  // }
 
+  if (event.target.scrollTop > 400 && corporat.value == "") {
 
+    corporat.value = defineAsyncComponent(() => {
 
+      return import("../../components/corporation.vue");
 
+    });
 
+  }
 
+}
 
+
 
+// 在组件挂载时添加滚动事件监听器
 
+onMounted(() => {
 
+  // 初始化时也获取一次距离
 
+  updateScrollDistance();
 
+  window.addEventListener("scroll", updateScrollDistance);
 
+});
 
+
 
+// 在组件卸载时移除滚动事件监听器
 
+onUnmounted(() => {
 
+  window.removeEventListener("scroll", updateScrollDistance);
 
+});
 
 
 // 方案概述列表
 
 const overviewList = reactive({
 
@@ -116,7 +186,7 @@ const getBanneList = async () => {
 
     const { data } = await configApi.getBanneList({
 
       code: "product",
 
     });
 
-    var arr =[]
 
+    var arr = [];
 
     data.map((item) => {
 
       const obj = {
 
         imgUrl: item.image,
 
@@ -169,27 +239,27 @@ const customer = async () => {
 
   try {
 
     const { data } = await productApi.customer({});
 
     tabbar.customerlist = data;
 
-    tabbar.customerlist = []
 
-    if(index.value==0){
 
-      data.forEach((item)=>{
 
-        if(item.type=='group'){
 
-          tabbar.customerlist.push(item)
 
+    tabbar.customerlist = [];
 
+    if (index.value == 0) {
 
+      data.forEach((item) => {
 
+        if (item.type == "group") {
 
+          tabbar.customerlist.push(item);
 
         }
 
-      })
 
+      });
 
     }
 
-    if(index.value==1){
 
-      data.forEach((item)=>{
 
-        if(item.type=='professional'){
 
-          tabbar.customerlist.push(item)
 
+    if (index.value == 1) {
 
+      data.forEach((item) => {
 
+        if (item.type == "professional") {
 
+          tabbar.customerlist.push(item);
 
         }
 
-      })
 
+      });
 
     }
 
-    if(index.value==2){
 
-      data.forEach((item)=>{
 
-        if(item.type=='enterprise'){
 
-          tabbar.customerlist.push(item)
 
+    if (index.value == 2) {
 
+      data.forEach((item) => {
 
+        if (item.type == "enterprise") {
 
+          tabbar.customerlist.push(item);
 
         }
 
-      })
 
+      });
 
     }
 
   } catch (error) {}
 
 };
 
@@ -213,7 +283,8 @@ watch(
 
   () => route.query,
 
   (newVal) => {
 
     index.value = route.query.index;
 
-    customer()
 
+    router.go(0)
 
+    customer();
 
     if (index.value == 3) {
 
       plugin();
 
     } else {
 
@@ -286,6 +357,11 @@ const tabbar = reactive({
 
 </script>
 
 
 <style lang="scss" scoped>
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .imag {
 
   width: 100%;
 
   height: 570px;

+ 128 - 124
src/view/handbook/bookinfo.vue
ファイルの表示 

@@ -1,117 +1,119 @@
 
 <template>
 
-  <div class="top flex">
 
-    <div class="content flex">
 
-      <div
 
-        @click="topchange(item.name, idx, item.id)"
 
-        class="item"
 
-        :class="changeindex == idx ? 'active' : ''"
 
-        v-for="(item, idx) in book.list"
 
-        :key="idx"
 
-      >
 
-        {{ item.name }}
 
+  <div class="scroll-container">
 
+    <div class="top flex">
 
+      <div class="content flex">
 
+        <div
 
+          @click="topchange(item.name, idx, item.id)"
 
+          class="item"
 
+          :class="changeindex == idx ? 'active' : ''"
 
+          v-for="(item, idx) in book.list"
 
+          :key="idx"
 
+        >
 
+          {{ item.name }}
 
+        </div>
 
       </div>
 
     </div>
 
-  </div>
 
-  <div class="content" style="display: flex">
 
-    <div class="left">
 
-      <div class="chan">{{ changefont }}</div>
 
-      <el-input
 
-        v-model="input2"
 
-        style="width: 80%"
 
-        @change="toinput"
 
-        placeholder="请输入关键字搜索"
 
-        :prefix-icon="Search"
 
-      />
 
-      <div class="menu">
 
-        <el-menu
 
-          class="el-menu-vertical-demo"
 
-          @open="handleOpen"
 
-          @close="closeb"
 
-          :unique-opened="true"
 
-          :default-active="defaultact"
 
-        >
 
-          <el-sub-menu
 
-            v-for="(item, idx) in book.category"
 
-            :key="idx"
 
-            :index="String(item.id) + '-' + item.name"
 
+    <div class="content" style="display: flex">
 
+      <div class="left">
 
+        <div class="chan">{{ changefont }}</div>
 
+        <el-input
 
+          v-model="input2"
 
+          style="width: 80%"
 
+          @change="toinput"
 
+          placeholder="请输入关键字搜索"
 
+          :prefix-icon="Search"
 
+        />
 
+        <div class="menu">
 
+          <el-menu
 
+            class="el-menu-vertical-demo"
 
+            @open="handleOpen"
 
+            @close="closeb"
 
+            :unique-opened="true"
 
+            :default-active="defaultact"
 
           >
 
-            <template #title>
 
-              <div>
 
-                <span>{{ item.name }}</span>
 
-              </div>
 
-            </template>
 
-            <template v-if="item.children">
 
-              <el-sub-menu
 
-                v-for="(item2, ind) in item.children"
 
-                :key="ind"
 
-                :index="item.id + '-' + item2.id + '-' + item2.name"
 
-              >
 
-                <template #title>{{ item2.name }}</template>
 
+            <el-sub-menu
 
+              v-for="(item, idx) in book.category"
 
+              :key="idx"
 
+              :index="String(item.id) + '-' + item.name"
 
+            >
 
+              <template #title>
 
+                <div>
 
+                  <span>{{ item.name }}</span>
 
+                </div>
 
+              </template>
 
+              <template v-if="item.children">
 
+                <el-sub-menu
 
+                  v-for="(item2, ind) in item.children"
 
+                  :key="ind"
 
+                  :index="item.id + '-' + item2.id + '-' + item2.name"
 
+                >
 
+                  <template #title>{{ item2.name }}</template>
 
 
-                <template v-if="item2.children">
 
-                  <el-sub-menu
 
-                    v-for="(item3, inda) in item2.children"
 
-                    :key="inda"
 
-                    :index="item.id + '-' + item2.id + '-' + item3.id"
 
-                  >
 
-                    <template #title>{{ item3.name }}</template>
 
+                  <template v-if="item2.children">
 
+                    <el-sub-menu
 
+                      v-for="(item3, inda) in item2.children"
 
+                      :key="inda"
 
+                      :index="item.id + '-' + item2.id + '-' + item3.id"
 
+                    >
 
+                      <template #title>{{ item3.name }}</template>
 
+                      <el-menu-item
 
+                        v-for="(child, inx) in item3.documents"
 
+                        :key="inx"
 
+                        @click="change(child.content, child.title)"
 
+                        :index="
 
+                          item.id +
 
+                          '-' +
 
+                          item2.id +
 
+                          '-' +
 
+                          item3.id +
 
+                          '-' +
 
+                          child.id +
 
+                          '-' +
 
+                          item3.name
 
+                        "
 
+                        >{{ child.title }}</el-menu-item
 
+                      >
 
+                    </el-sub-menu>
 
+                  </template>
 
+                  <template v-else>
 
                     <el-menu-item
 
-                      v-for="(child, inx) in item3.documents"
 
-                      :key="inx"
 
+                      v-for="(child, index) in item2.documents"
 
+                      :key="index"
 
                       @click="change(child.content, child.title)"
 
-                      :index="
 
-                        item.id +
 
-                        '-' +
 
-                        item2.id +
 
-                        '-' +
 
-                        item3.id +
 
-                        '-' +
 
-                        child.id +
 
-                        '-' +
 
-                        item3.name
 
-                      "
 
+                      :index="item.id + '-' + item2.id + '-' + child.id"
 
                       >{{ child.title }}</el-menu-item
 
                     >
 
-                  </el-sub-menu>
 
-                </template>
 
-                <template v-else>
 
-                  <el-menu-item
 
-                    v-for="(child, index) in item2.documents"
 
-                    :key="index"
 
-                    @click="change(child.content, child.title)"
 
-                    :index="item.id + '-' + item2.id + '-' + child.id"
 
-                    >{{ child.title }}</el-menu-item
 
-                  >
 
-                </template>
 
-              </el-sub-menu>
 
-            </template>
 
-            <template v-else>
 
-              <el-menu-item
 
-                v-for="(child, index) in item.documents"
 
-                :key="index"
 
-                :index="item.id + '-' + child.id"
 
-                @click="change(child.content, child.title)"
 
-                >{{ child.title }}</el-menu-item
 
-              >
 
-            </template>
 
-          </el-sub-menu>
 
-        </el-menu>
 
+                  </template>
 
+                </el-sub-menu>
 
+              </template>
 
+              <template v-else>
 
+                <el-menu-item
 
+                  v-for="(child, index) in item.documents"
 
+                  :key="index"
 
+                  :index="item.id + '-' + child.id"
 
+                  @click="change(child.content, child.title)"
 
+                  >{{ child.title }}</el-menu-item
 
+                >
 
+              </template>
 
+            </el-sub-menu>
 
+          </el-menu>
 
+        </div>
 
       </div>
 
-    </div>
 
-    <div class="right" v-if="book.content.con">
 
-      <div style="display: flex; align-items: center; column-gap: 6px">
 
-        <span class="topsm">{{ changefont }}</span>
 
-        <el-icon v-if="categoryname"><ArrowRight /></el-icon>
 
-        <span class="topsm">{{ categoryname }}</span>
 
-        <el-icon v-if="docu"><ArrowRight /></el-icon>
 
-        <span class="topsm">{{ docu }}</span>
 
+      <div class="right" v-if="book.content.con">
 
+        <div style="display: flex; align-items: center; column-gap: 6px">
 
+          <span class="topsm">{{ changefont }}</span>
 
+          <el-icon v-if="categoryname"><ArrowRight /></el-icon>
 
+          <span class="topsm">{{ categoryname }}</span>
 
+          <el-icon v-if="docu"><ArrowRight /></el-icon>
 
+          <span class="topsm">{{ docu }}</span>
 
+        </div>
 
+        <div class="bigtitle">{{ docu }}</div>
 
+        <div class="btnline"></div>
 
+        <div v-html="book.content.con"></div>
 
+      </div>
 
+      <div class="right" v-else>
 
+        <div v-html="book.content.first"></div>
 
       </div>
 
-      <div class="bigtitle">{{ docu }}</div>
 
-      <div class="btnline"></div>
 
-      <div v-html="book.content.con"></div>
 
-    </div>
 
-    <div class="right" v-else>
 
-      <div v-html="book.content.first"></div>
 
     </div>
 
   </div>
 
 </template>
 
@@ -121,7 +123,7 @@ import { useRouter, useRoute } from "vue-router";
 
 import { onMounted, ref, reactive } from "vue";
 
 import { Calendar, Search, ArrowRight } from "@element-plus/icons-vue";
 
 import * as bookApi from "../../api/document";
 
-import * as agreementAPi from '../../api/login'
 
+import * as agreementAPi from "../../api/login";
 
 const route = useRoute();
 
 const router = useRouter();
 
 const defaultact = ref("");
 
@@ -142,7 +144,7 @@ const book = reactive({
 
   documentlist: [],
 
   content: {
 
     con: "",
 
-    first:''
 
+    first: "",
 
   },
 
 });
 
 
@@ -156,13 +158,13 @@ const topchange = (name, index, id) => {
 
   book.documentlist = [];
 
   book.content.con = "";
 
   category();
 
-  if(book.content.con==''&&type_id.value==1){
 
-  agreement('product')
 
-}else if(book.content.con==''&&type_id.value==2){
 
-  agreement('exploit')
 
-}else if(book.content.con==''&&type_id.value==3){
 
-  agreement('port')
 
-}
 
+  if (book.content.con == "" && type_id.value == 1) {
 
+    agreement("product");
 
+  } else if (book.content.con == "" && type_id.value == 2) {
 
+    agreement("exploit");
 
+  } else if (book.content.con == "" && type_id.value == 3) {
 
+    agreement("port");
 
+  }
 
 };
 
 
 const lastname = ref("");
 
@@ -183,22 +185,19 @@ if (route.query.indexid) {
 
 const agreement = async (code) => {
 
   try {
 
     const { data } = await agreementAPi.agreement({
 
-        code:code
 
+      code: code,
 
     });
 
-    book.content.first = data
 
+    book.content.first = data;
 
   } catch (error) {}
 
 };
 
-if(book.content.con==''&&type_id.value==1){
 
-  agreement('product')
 
-}else if(book.content.con==''&&type_id.value==2){
 
-  agreement('exploit')
 
-}else if(book.content.con==''&&type_id.value==3){
 
-  agreement('port')
 
+if (book.content.con == "" && type_id.value == 1) {
 
+  agreement("product");
 
+} else if (book.content.con == "" && type_id.value == 2) {
 
+  agreement("exploit");
 
+} else if (book.content.con == "" && type_id.value == 3) {
 
+  agreement("port");
 
 }
 
 
-
 
-
 
-
 
 //文档类型列表
 
 const documentType = async () => {
 
   try {
 
@@ -235,7 +234,12 @@ const change = (content, title) => {
 
 </script>
 
 
 <style lang="scss" scoped>
 
-:deep(.el-icon svg){
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
+:deep(.el-icon svg) {
 
   width: 16px !important;
 
   height: 16px !important;
 
 }

+ 50 - 43
src/view/handbook/handbook.vue
ファイルの表示 

@@ -1,33 +1,34 @@
 
 <template>
 
-  <div class="">
 
-    <div class="black">
 
-      <div class="title">云厂长功能手册</div>
 
-      <div>
 
-        <el-input
 
-          @change="toinput"
 
-          v-model="input2"
 
-          style="width: 240px"
 
-          placeholder="你可以输入关键词，或者直接输入问题"
 
-          :prefix-icon="Search"
 
-        />
 
+  <div class="scroll-container">
 
+    <div class="">
 
+      <div class="black">
 
+        <div class="title">云厂长功能手册</div>
 
+        <div>
 
+          <el-input
 
+            @change="toinput"
 
+            v-model="input2"
 
+            style="width: 240px"
 
+            placeholder="你可以输入关键词，或者直接输入问题"
 
+            :prefix-icon="Search"
 
+          />
 
+        </div>
 
       </div>
 
-    </div>
 
-    <!-- 应用模块组件 -->
 
-    <div class="bga">
 
-      <div class="title">快速入门</div>
 
-      <div class="sm_font">从多个角度帮助你快速了解我们</div>
 
-      <!-- <div class="flex">
 
+      <!-- 应用模块组件 -->
 
+      <div class="bga">
 
+        <div class="title">快速入门</div>
 
+        <div class="sm_font">从多个角度帮助你快速了解我们</div>
 
+        <!-- <div class="flex">
 
       <div v-for="(item,idx) in 10" :key="idx" class="item"></div>
 
     </div> -->
 
-      <div
 
-        class="imgbox"
 
-        style="
 
-          display: flex;
 
-          justify-content: space-between;
 
-          align-items: center;
 
-        "
 
-      >
 
-        <!-- <img
 
+        <div
 
+          class="imgbox"
 
+          style="
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+          "
 
+        >
 
+          <!-- <img
 
           @click="bookinfo"
 
           v-for="(item, idx) in book.list"
 
           :key="idx"
 
@@ -35,21 +36,22 @@
 
           :src="item.image"
 
           alt=""
 
         /> -->
 
-        <div
 
-          class="image"
 
-          @click="bookinfo(item.name, idx, item.id)"
 
-          v-for="(item, idx) in book.list"
 
-          :key="idx"
 
-        >
 
-          <img class="small" :src="item.image" alt="" />
 
-          <div class="booktitle">{{ item.name }}</div>
 
-          <div class="content">{{ item.description }}</div>
 
-          <div class="line"></div>
 
-          <div class="time">{{ item.created_at }}</div>
 
+          <div
 
+            class="image"
 
+            @click="bookinfo(item.name, idx, item.id)"
 
+            v-for="(item, idx) in book.list"
 
+            :key="idx"
 
+          >
 
+            <img class="small" :src="item.image" alt="" />
 
+            <div class="booktitle">{{ item.name }}</div>
 
+            <div class="content">{{ item.description }}</div>
 
+            <div class="line"></div>
 
+            <div class="time">{{ item.created_at }}</div>
 
+          </div>
 
         </div>
 
       </div>
 
+      <bottom></bottom>
 
     </div>
 
-    <bottom></bottom>
 
   </div>
 
 </template>
 
 
@@ -70,14 +72,14 @@ const bookinfo = (name, idx, id) => {
 
     },
 
   });
 
 };
 
-const input2 = ref('')
 
+const input2 = ref("");
 
 //跳转搜索页面
 
 const toinput = () => {
 
   router.push({
 
-    path:'/input',
 
-    query:{
 
-      input2: input2.value
 
-    }
 
+    path: "/input",
 
+    query: {
 
+      input2: input2.value,
 
+    },
 
   });
 
 };
 
 const book = reactive({
 
@@ -93,6 +95,11 @@ onMounted(documentType);
 
 </script>
 
 
 <style lang="scss" scoped>
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .small {
 
   width: 56px;
 
   height: 54px;

+ 55 - 46
src/view/handbook/input.vue
ファイルの表示 

@@ -1,52 +1,56 @@
 
 <template>
 
-  <div class="inputbg">
 
-    <div style="flex-direction: column; display: flex; align-items: center">
 
-      <div class="toptitle">共搜索到 {{ total }} 条相关结果</div>
 
-      <div class="input">
 
-        <el-input
 
-          @change="searcha"
 
-          v-model="input"
 
-          class="w-50 m-2"
 
-          placeholder="请输入你要搜索的内容"
 
-        >
 
-          <template #prefix>
 
-            <el-icon class="el-input__icon"><search /></el-icon>
 
-          </template>
 
-          <template #suffix>
 
-            <!-- <el-icon class="el-input__icon"><calendar /></el-icon> -->
 
-            <el-icon @click="cleara" v-if="input" style="cursor: pointer"
 
-              ><CircleCloseFilled
 
-            /></el-icon>
 
-            <div v-if="input" class="line"></div>
 
-            <div class="search" @click="searcha">搜索</div>
 
-          </template>
 
-        </el-input>
 
-      </div>
 
-    </div>
 
-    <div class="content">
 
-      <div
 
-        class="item"
 
-        v-for="(item, idx) in result.info"
 
-        :key="idx"
 
-        @click="tobookinfo(item)"
 
-      >
 
-        <div class="title" v-html="getSimpleText(item.title)"></div>
 
-        <div class="con" v-html="getSimpleText(item.content)"></div>
 
-        <div class="bottom">
 
-          <div class="left">{{ item.type_name }}/{{ item.category_name }}</div>
 
-          <div class="right">{{ item.created_at }}</div>
 
+  <div class="scroll-container">
 
+    <div class="inputbg">
 
+      <div style="flex-direction: column; display: flex; align-items: center">
 
+        <div class="toptitle">共搜索到 {{ total }} 条相关结果</div>
 
+        <div class="input">
 
+          <el-input
 
+            @change="searcha"
 
+            v-model="input"
 
+            class="w-50 m-2"
 
+            placeholder="请输入你要搜索的内容"
 
+          >
 
+            <template #prefix>
 
+              <el-icon class="el-input__icon"><search /></el-icon>
 
+            </template>
 
+            <template #suffix>
 
+              <!-- <el-icon class="el-input__icon"><calendar /></el-icon> -->
 
+              <el-icon @click="cleara" v-if="input" style="cursor: pointer"
 
+                ><CircleCloseFilled
 
+              /></el-icon>
 
+              <div v-if="input" class="line"></div>
 
+              <div class="search" @click="searcha">搜索</div>
 
+            </template>
 
+          </el-input>
 
         </div>
 
       </div>
 
-      <div class="bottoma" v-if="result.info.length > 0">
 
-        <el-pagination
 
-          :background="true"
 
-          layout=" prev, pager, next, jumper"
 
-          :total="total"
 
-          @size-change="handleSizeChange"
 
-          @current-change="handleCurrentChange"
 
-          jumper-text="跳转到"
 
-          :page-size="5"
 
-        />
 
+      <div class="content">
 
+        <div
 
+          class="item"
 
+          v-for="(item, idx) in result.info"
 
+          :key="idx"
 
+          @click="tobookinfo(item)"
 
+        >
 
+          <div class="title" v-html="getSimpleText(item.title)"></div>
 
+          <div class="con" v-html="getSimpleText(item.content)"></div>
 
+          <div class="bottom">
 
+            <div class="left">
 
+              {{ item.type_name }}/{{ item.category_name }}
 
+            </div>
 
+            <div class="right">{{ item.created_at }}</div>
 
+          </div>
 
+        </div>
 
+        <div class="bottoma" v-if="result.info.length > 0">
 
+          <el-pagination
 
+            :background="true"
 
+            layout=" prev, pager, next, jumper"
 
+            :total="total"
 
+            @size-change="handleSizeChange"
 
+            @current-change="handleCurrentChange"
 
+            jumper-text="跳转到"
 
+            :page-size="5"
 
+          />
 
+        </div>
 
       </div>
 
     </div>
 
   </div>
 
@@ -150,6 +154,11 @@ const getSimpleText = (html) => {
 
 </script>
 
 
 <style lang="scss" scoped>
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .bottoma {
 
   margin-top: 30px;
 
   display: flex;

+ 238 - 209
src/view/video/course.vue
ファイルの表示 

@@ -1,238 +1,249 @@
 
 <template>
 
-  <div class="bg">
 
-    <div class="box">
 
-      <div class="top">
 
-        <div class="content">
 
-          <div class="title">{{ videodetail.detail.title }}</div>
 
-          <div class="info">
 
-            <div class="time" v-if="videodetail.detail.duration_num">
 
-              课程总量：{{ videodetail.detail.video_num }}课时，共{{
 
-                videodetail.detail.duration_num.slice(0, 2)
 
-              }}小时{{ videodetail.detail.duration_num.slice(3, 5) }}分钟{{
 
-                videodetail.detail.duration_num.slice(6, 8)
 
-              }}秒
 
+  <div class="scroll-container" @scroll="handleScroll">
 
+    <div class="bg">
 
+      <div class="box">
 
+        <div class="top">
 
+          <div class="content">
 
+            <div
 
+              @click="returna"
 
+              class="title"
 
+              style="display: flex; align-items: center"
 
+            >
 
+              <el-icon><ArrowLeft /></el-icon>
 
+              <div>{{ videodetail.detail.title }}</div>
 
             </div>
 
-            <div class="time left">
 
-              课程成员：{{ videodetail.detail.study_num }}人
 
+            <div class="info">
 
+              <div class="time" v-if="videodetail.detail.duration_num">
 
+                课程总量：{{ videodetail.detail.video_num }}课时，共{{
 
+                  videodetail.detail.duration_num.slice(0, 2)
 
+                }}小时{{ videodetail.detail.duration_num.slice(3, 5) }}分钟{{
 
+                  videodetail.detail.duration_num.slice(6, 8)
 
+                }}秒
 
+              </div>
 
+              <div class="time left">
 
+                课程成员：{{ videodetail.detail.study_num }}人
 
+              </div>
 
             </div>
 
           </div>
 
         </div>
 
       </div>
 
-    </div>
 
-    <div class="tabs">
 
-      <div class="content" style="display: flex; align-items: center">
 
-        <div @click="tabs(0)" class="tabit">
 
-          <div :class="active == 0 ? 'active' : ''">课程目录</div>
 
-          <div v-if="active == 0" class="line"></div>
 
-        </div>
 
-        <div @click="tabs(1)" class="tabit left">
 
-          <div :class="active == 1 ? 'active' : ''">课程评论</div>
 
-          <div v-if="active == 1" class="line"></div>
 
+      <div class="tabs">
 
+        <div class="content" style="display: flex; align-items: center">
 
+          <div @click="tabs(0)" class="tabit">
 
+            <div :class="active == 0 ? 'active' : ''">课程目录</div>
 
+            <div v-if="active == 0" class="line"></div>
 
+          </div>
 
+          <div @click="tabs(1)" class="tabit left">
 
+            <div :class="active == 1 ? 'active' : ''">课程评论</div>
 
+            <div v-if="active == 1" class="line"></div>
 
+          </div>
 
         </div>
 
       </div>
 
-    </div>
 
-    <!-- 内容 -->
 
-    <div class="content">
 
-      <div class="course" v-if="active == 0">
 
-        <div v-for="(item, idx) in videodetail.detail.below_course" :key="idx">
 
-          <div class="bigtitle">
 
-            <div>{{ item.title }}</div>
 
-            <div class="time">
 
-              共{{ item.video.length }}课时，共{{
 
-                item.duration_num.slice(0, 2)
 
-              }}小时{{ item.duration_num.slice(3, 5) }}分钟{{
 
-                item.duration_num.slice(6, 8)
 
-              }}秒
 
-            </div>
 
-          </div>
 
+      <!-- 内容 -->
 
+      <div class="content">
 
+        <div class="course" v-if="active == 0">
 
           <div
 
-            class="info actinfo"
 
-            v-for="(child, index) in item.video"
 
-            :key="index"
 
-            @click="videoinfo(child.id)"
 
+            v-for="(item, idx) in videodetail.detail.below_course"
 
+            :key="idx"
 
           >
 
-            <div style="display: flex; align-items: center">
 
-              <div class="videotitle">
 
-                第{{ index + 1 }}课 {{ child.title }}
 
+            <div class="bigtitle">
 
+              <div>{{ item.title }}</div>
 
+              <div class="time">
 
+                共{{ item.video.length }}课时，共{{
 
+                  item.duration_num.slice(0, 2)
 
+                }}小时{{ item.duration_num.slice(3, 5) }}分钟{{
 
+                  item.duration_num.slice(6, 8)
 
+                }}秒
 
               </div>
 
-              <div class="tim">{{ child.duration }}</div>
 
             </div>
 
-            <div style="display: flex; align-items: center">
 
-              <div
 
-                v-if="child.study_record && child.study_record.is_complete == 0"
 
-              >
 
-                <div
 
-                  class="jifen"
 
-                  style="
 
-                    background: #1fb759;
 
-                    display: flex;
 
-                    align-items: center;
 
-                  "
 
-                >
 
+
 
+            <template v-for="(child, index) in item.video" :key="index">
 
+              <div class="info actinfo" @click="videoinfo(child)">
 
+                <div style="display: flex; align-items: center">
 
+                  <div class="videotitle">
 
+                    第{{ index + 1 }}课 {{ child.title }}
 
+                  </div>
 
+                  <div class="tim">{{ child.duration }}</div>
 
+                </div>
 
+                <div style="display: flex; align-items: center">
 
+                  <div
 
+                    v-if="
 
+                      child.study_record && child.study_record.is_complete == 0
 
+                    "
 
+                  >
 
+                    <div
 
+                      class="jifen"
 
+                      style="
 
+                        background: #1fb759;
 
+                        display: flex;
 
+                        align-items: center;
 
+                      "
 
+                    >
 
+                      <img
 
+                        class="smallimg"
 
+                        src="../../assets/images/yes.png"
 
+                        alt=""
 
+                      />
 
+                      {{ child.points }}积分
 
+                    </div>
 
+                  </div>
 
+                  <div class="jifen" v-else>可获得{{ child.points }}积分</div>
 
+                  <div class="lineab"></div>
 
+                  <div
 
+                    class="late"
 
+                    v-if="
 
+                      child.study_record && child.study_record.is_complete == 0
 
+                    "
 
+                  >
 
+                    已学习
 
+                  </div>
 
+                  <div
 
+                    v-else-if="
 
+                      child.study_record &&
 
+                      child.study_record.is_complete == 1 &&
 
+                      child.id == videodetail.detail.new_record.video_id
 
+                    "
 
+                    class="late"
 
+                  >
 
+                    最近学习
 
+                  </div>
 
+                  <img
 
+                    v-if="
 
+                      child.study_record && child.study_record.is_complete == 0
 
+                    "
 
+                    class="smallimg"
 
+                    src="../../assets/images/complete.png"
 
+                    alt=""
 
+                  />
 
                   <img
 
+                    v-else-if="
 
+                      child.study_record &&
 
+                      child.study_record.is_complete == 1 &&
 
+                      child.id == videodetail.detail.new_record.video_id
 
+                    "
 
                     class="smallimg"
 
-                    src="../../assets/images/yes.png"
 
+                    src="../../assets/images/lately.png"
 
+                    alt=""
 
+                  />
 
+                  <img
 
+                    v-else
 
+                    class="smallimg"
 
+                    src="../../assets/images/uncompleted.png"
 
                     alt=""
 
                   />
 
-                  {{ child.points }}积分
 
                 </div>
 
               </div>
 
-              <div class="jifen" v-else>可获得{{ child.points }}积分</div>
 
-              <div class="lineab"></div>
 
-              <div
 
-                class="late"
 
-                v-if="child.study_record && child.study_record.is_complete == 0"
 
-              >
 
-                已学习
 
-              </div>
 
-              <div
 
-                v-else-if="
 
-                  child.study_record &&
 
-                  child.study_record.is_complete == 1 &&
 
-                  child.id == videodetail.detail.new_record.video_id
 
-                "
 
-                class="late"
 
-              >
 
-                最近学习
 
-              </div>
 
-              <img
 
-                v-if="child.study_record && child.study_record.is_complete == 0"
 
-                class="smallimg"
 
-                src="../../assets/images/complete.png"
 
-                alt=""
 
-              />
 
-              <img
 
-                v-else-if="
 
-                  child.study_record &&
 
-                  child.study_record.is_complete == 1 &&
 
-                  child.id == videodetail.detail.new_record.video_id
 
-                "
 
-                class="smallimg"
 
-                src="../../assets/images/lately.png"
 
-                alt=""
 
+            </template>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 评论 -->
 
+      <div class="content">
 
+        <div class="course" v-if="active == 1">
 
+          <div v-if="islogin">
 
+            <!-- <div class="bigtitle">评论</div> -->
 
+            <div>
 
+              <el-input
 
+                v-model="textarea"
 
+                :rows="4"
 
+                type="textarea"
 
+                placeholder="请输入评论内容…"
 
               />
 
-              <img
 
-                v-else
 
-                class="smallimg"
 
-                src="../../assets/images/uncompleted.png"
 
-                alt=""
 
+            </div>
 
+            <div class="bluebtn" @click="comment">发布评论</div>
 
+            <div class="comment-list">
 
+              <dl v-for="(item, idx) in commentList.list" :key="idx">
 
+                <dt>
 
+                  <row
 
+                    :name="item.member.nickname"
 
+                    :key="idx"
 
+                    reply=""
 
+                    :descs="item.content"
 
+                    :time="item.created_at"
 
+                    :course_id="route.query.id"
 
+                    video_id=""
 
+                    :author_id="item.member.id"
 
+                    :avatar="item.member.avatar"
 
+                    @list="comment_list"
 
+                    :reply_id="item.id"
 
+                    :reply_p_id="item.id"
 
+                  ></row>
 
+                </dt>
 
+                <dd v-for="(child, index) in item.reply" :key="index">
 
+                  <row
 
+                    :name="child.member.nickname"
 
+                    :reply="child.reply_member.nickname"
 
+                    :descs="child.content"
 
+                    :course_id="route.query.id"
 
+                    video_id=""
 
+                    :author_id="child.member.id"
 
+                    :avatar="child.member.avatar"
 
+                    @list="comment_list"
 
+                    :time="child.created_at"
 
+                    :reply_id="child.id"
 
+                    :reply_p_id="child.reply_p_id"
 
+                  ></row>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+            <div v-if="commentList.list.length > 0">
 
+              <el-pagination
 
+                background
 
+                layout="prev, pager, next"
 
+                :total="total"
 
+                @size-change="handleSizeChange"
 
+                @current-change="handleCurrentChange"
 
+                :page-size="5"
 
               />
 
             </div>
 
           </div>
 
+          <div v-else>
 
+            <div class="bigtitle">评论</div>
 
+            <div
 
+              style="display: flex; flex-direction: column; align-items: center"
 
+            >
 
+              <img class="suo" src="../../assets/images/suo.png" alt="" />
 
+              <div class="login">登录后才能查看评论</div>
 
+              <div class="log" @click="tologin">立即登录</div>
 
+            </div>
 
+          </div>
 
         </div>
 
       </div>
 
-    </div>
 
-    <!-- 评论 -->
 
-    <div class="content">
 
-      <div class="course" v-if="active == 1">
 
-        <div v-if="islogin">
 
-          <!-- <div class="bigtitle">评论</div> -->
 
-          <div>
 
-            <el-input
 
-              v-model="textarea"
 
-              :rows="4"
 
-              type="textarea"
 
-              placeholder="请输入评论内容…"
 
-            />
 
-          </div>
 
-          <div class="bluebtn" @click="comment">发布评论</div>
 
-          <div class="comment-list">
 
-            <dl v-for="(item, idx) in commentList.list" :key="idx">
 
-              <dt>
 
-                <row
 
-                  :name="item.member.nickname"
 
-                  :key="idx"
 
-                  reply=""
 
-                  :descs="item.content"
 
-                  :time="item.created_at"
 
-                  :course_id="route.query.id"
 
-                  video_id=""
 
-                  :author_id="item.member.id"
 
-                  :avatar="item.member.avatar"
 
-                  @list="comment_list"
 
-                  :reply_id="item.id"
 
-                  :reply_p_id="item.id"
 
-                ></row>
 
-              </dt>
 
-              <dd v-for="(child, index) in item.reply" :key="index">
 
-                <row
 
-                  :name="child.member.nickname"
 
-                  :reply="child.reply_member.nickname"
 
-                  :descs="child.content"
 
-                  :course_id="route.query.id"
 
-                  video_id=""
 
-                  :author_id="child.member.id"
 
-                  :avatar="child.member.avatar"
 
-                  @list="comment_list"
 
-                  :time="child.created_at"
 
-                  :reply_id="child.id"
 
-                  :reply_p_id="child.reply_p_id"
 
-                ></row>
 
-              </dd>
 
-            </dl>
 
+      <!-- 定位 -->
 
+      <div class="fix">
 
+        <div class="img">
 
+          <img class="img" :src="videodetail.detail.image" alt="" />
 
+        </div>
 
+        <div style="display: flex; flex-direction: column; align-items: center">
 
+          <div class="join" v-if="islogin && is_join == 0">
 
+            <div>您已加入</div>
 
+            <div class="success">完成进度{{ percentage }}%</div>
 
           </div>
 
-          <div v-if="commentList.list.length > 0">
 
-            <el-pagination
 
-              background
 
-              layout="prev, pager, next"
 
-              :total="total"
 
-              @size-change="handleSizeChange"
 
-              @current-change="handleCurrentChange"
 
-              :page-size="5"
 
+          <div class="progress" v-if="islogin && is_join == 0">
 
+            <el-progress
 
+              :percentage="percentage"
 
+              :color="customColor"
 
+              :show-text="false"
 
             />
 
           </div>
 
-        </div>
 
-        <div v-else>
 
-          <div class="bigtitle">评论</div>
 
           <div
 
-            style="display: flex; flex-direction: column; align-items: center"
 
+            class="button"
 
+            v-if="is_join == 0"
 
+            @click="videoinfo(videodetail.detail.new_record)"
 
           >
 
-            <img class="suo" src="../../assets/images/suo.png" alt="" />
 
-            <div class="login">登录后才能查看评论</div>
 
-            <div class="log" @click="tologin">立即登录</div>
 
+            继续学习
 
+          </div>
 
+          <div class="button" v-if="is_join == 1 && islogin" @click="join">
 
+            加入课程
 
+          </div>
 
+          <div class="updata" v-if="videodetail.detail.updated_at">
 
+            最后更新时间：{{ videodetail.detail.updated_at.slice(0, 10) }}
 
+          </div>
 
+          <div class="linea"></div>
 
+          <div class="share">
 
+            <img class="image" src="../../assets/images/share.png" alt="" />
 
+            <div class="font" @click="shareLink">分享</div>
 
           </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-    <!-- 定位 -->
 
-    <div class="fix">
 
-      <div class="img">
 
-        <img class="img" :src="videodetail.detail.image" alt="" />
 
-      </div>
 
-      <div style="display: flex; flex-direction: column; align-items: center">
 
-        <div class="join" v-if="islogin && is_join == 0">
 
-          <div>您已加入</div>
 
-          <div class="success">完成进度{{ percentage }}%</div>
 
-        </div>
 
-        <div class="progress" v-if="islogin && is_join == 0">
 
-          <el-progress
 
-            :percentage="percentage"
 
-            :color="customColor"
 
-            :show-text="false"
 
-          />
 
-        </div>
 
-        <div
 
-          class="button"
 
-          v-if="is_join == 0"
 
-          @click="
 
-            videoinfo(
 
-              videodetail.detail.new_record.video_id,
 
-              videodetail.detail.new_record.duration
 
-            )
 
-          "
 
-        >
 
-          继续学习
 
-        </div>
 
-        <div class="button" v-if="is_join == 1 && islogin" @click="join">
 
-          加入课程
 
-        </div>
 
-        <div class="updata" v-if="videodetail.detail.updated_at">
 
-          最后更新时间：{{ videodetail.detail.updated_at.slice(0, 10) }}
 
-        </div>
 
-        <div class="linea"></div>
 
-        <div class="share">
 
-          <img class="image" src="../../assets/images/share.png" alt="" />
 
-          <div class="font" @click="shareLink">分享</div>
 
         </div>
 
       </div>
 
     </div>
 
@@ -245,6 +256,7 @@ import { onMounted, ref, reactive } from "vue";
 
 import * as videoAPi from "../../api/kecheng";
 
 import row from "../../components/row/row.vue";
 
 import * as copyDomText from "../../utils/common";
 
+import { ArrowLeft } from "@element-plus/icons-vue";
 
 const router = useRouter();
 
 const route = useRoute();
 
 //判断是否加入
 
@@ -262,6 +274,10 @@ const videodetail = reactive({
 
 const commentList = reactive({
 
   list: [],
 
 });
 
+//返回
 
+const returna = () => {
 
+  router.go(-1);
 
+};
 
 //进度条
 
 const percentage = ref(0);
 
 const read = ref(0);
 
@@ -370,18 +386,28 @@ const tabs = (idx) => {
 
   active.value = idx;
 
 };
 
 const customColor = ref("#409eff");
 
-const videoinfo = (id, time) => {
 
+const videoinfo = (child) => {
 
   router.push({
 
     name: "info",
 
     query: {
 
-      id: id,
 
-      time: time || 0,
 
+      id: child.video_id || child.id,
 
+      time: child.study_record == null ? 0 : child.study_record.duration,
 
+      is_complete:child.study_record == null ? 1 : child.study_record.is_complete,
 
     },
 
   });
 
 };
 
 </script>
 
 
 <style lang="scss" scoped>
 
+:deep(.el-icon svg) {
 
+  width: 24px !important;
 
+  height: 24px !important;
 
+}
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .videotitle {
 
   width: 420px;
 
   -webkit-line-clamp: 2;
 
@@ -542,7 +568,7 @@ const videoinfo = (id, time) => {
 
   margin-right: 4px;
 
 }
 
 .jifen {
 
-  width: 88px;
 
+  // width: 88px;
 
   height: 24px;
 
   background: #0d0fff;
 
   border-radius: 2px;
 
@@ -554,6 +580,8 @@ const videoinfo = (id, time) => {
 
   display: flex;
 
   align-items: center;
 
   justify-content: center;
 
+  padding: 3px 8px;
 
+  box-sizing: border-box;
 
 }
 
 .fix {
 
   position: absolute;
 
@@ -756,6 +784,7 @@ const videoinfo = (id, time) => {
 
     text-align: left;
 
     font-style: normal;
 
     margin-top: 76px;
 
+    cursor: pointer;
 
   }
 
   .info {
 
     display: flex;

+ 48 - 51
src/view/video/index.vue
ファイルの表示 

@@ -1,43 +1,45 @@
 
 <template>
 
-  <Banne :banneImageList="imgList.banneImageList" />
 
-  <div
 
-    class="videobox"
 
-    style="
 
-      display: flex;
 
-      justify-content: space-between;
 
-      flex-direction: column;
 
-    "
 
-  >
 
-    <div class="box">
 
-      <div
 
-        @click="toinfo(item.id)"
 
-        class="item"
 
-        v-for="(item, idx) in imgList.list"
 
-        :key="idx"
 
-      >
 
-        <img class="image" :src="item.image" alt="" />
 
-        <div class="minbox">{{ item.duration_num }}</div>
 
-        <div class="bottom">
 
-          <div class="title">{{ item.title }}</div>
 
-          <div class="small">
 
-            <div>共{{ item.video_num }}节课</div>
 
-            <div>{{ item.study_num }}人学习</div>
 
+  <div class="scroll-container">
 
+    <Banne :banneImageList="imgList.banneImageList" />
 
+    <div
 
+      class="videobox"
 
+      style="
 
+        display: flex;
 
+        justify-content: space-between;
 
+        flex-direction: column;
 
+      "
 
+    >
 
+      <div class="box">
 
+        <div
 
+          @click="toinfo(item.id)"
 
+          class="item"
 
+          v-for="(item, idx) in imgList.list"
 
+          :key="idx"
 
+        >
 
+          <img class="image" :src="item.image" alt="" />
 
+          <div class="minbox">{{ item.duration_num }}</div>
 
+          <div class="bottom">
 
+            <div class="title">{{ item.title }}</div>
 
+            <div class="small">
 
+              <div>共{{ item.video_num }}节课</div>
 
+              <div>{{ item.study_num }}人学习</div>
 
+            </div>
 
           </div>
 
         </div>
 
       </div>
 
+      <div class="bottompage" v-if="imgList.list.length > 0">
 
+        <el-pagination
 
+          background
 
+          layout="prev, pager, next"
 
+          :total="total"
 
+          @current-change="handleCurrentChange"
 
+          :page-size="8"
 
+        />
 
+      </div>
 
     </div>
 
-    <div class="bottompage" v-if="imgList.list.length>0">
 
-      <el-pagination
 
-        background
 
-        layout="prev, pager, next"
 
-        :total="total"
 
-        @current-change="handleCurrentChange"
 
-        :page-size="8"
 
-      />
 
-    </div>
 
+    <!-- <div class="foot"></div> -->
 
+    <bottom></bottom>
 
   </div>
 
-  <!-- <div class="foot"></div> -->
 
-  <bottom></bottom>
 
 </template>
 
 <script lang="ts" setup>
 
 import { ref, reactive, onMounted, nextTick } from "vue";
 
@@ -49,40 +51,30 @@ import * as configApi from "../../api/config";
 
 const router = useRouter();
 
 
 //课程总数
 
-const total = ref(0)
 
-const page = ref(1)
 
+const total = ref(0);
 
+const page = ref(1);
 
 //课程列表
 
 const list = async () => {
 
   try {
 
     const { data } = await videoAPi.list({
 
-      page:page.value,
 
-      limit:8
 
+      page: page.value,
 
+      limit: 8,
 
     });
 
     imgList.list = data.data;
 
-    total.value = data.total
 
+    total.value = data.total;
 
   } catch (error) {}
 
 };
 
 onMounted(list);
 
 
 const handleCurrentChange = (val) => {
 
   page.value = val;
 
-  list()
 
+  list();
 
 };
 
 
 const imgList = reactive({
 
   //banne图需要的数据
 
   banneImageList: [
 
-    {
 
-      imgUrl:
 
-        "https://img1.baidu.com/it/u=1964831979,2551193402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=357",
 
-      isBtn: true,
 
-      btnText: "点我，了解详情",
 
-    },
 
-    {
 
-      imgUrl:
 
-        "https://img1.baidu.com/it/u=3821883389,2247186365&fm=253&fmt=auto&app=138&f=JPEG?w=798&h=500",
 
-      isBtn: false,
 
-    },
 
+
 
   ],
 
   list: [],
 
 });
 
@@ -106,6 +98,11 @@ const toinfo = (id) => {
 
 };
 
 </script>
 
 <style lang="less" scoped>
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .bottompage {
 
   display: flex;
 
   align-items: center;

+ 38 - 5
src/view/video/info.vue
ファイルの表示 

@@ -1,25 +1,28 @@
 
 <template>
 
-  <div>
 
+  <div class="scroll-container" >
 
     <div class="toptitle flex">
 
       <div class="content flex">
 
-        <div class="return" @click="returna">返回课程</div>
 
+        <div class="flex">
 
+          <img class="returnimg" src="../../assets/images/return.png" alt="">
 
+          <div class="return" @click="returna">返回课程</div>
 
+        </div>
 
         <div class="line"></div>
 
         <div class="title">{{ videoinfo.info.title }}</div>
 
       </div>
 
-    </div>
 
+    </div>  
     <div class="videobox">
 
       <div class="content" style="position: relative">
 
         <!-- <div > -->
 
         <video
 
+          ref="videoPlayer"
 
           controls
 
           class="video"
 
           @ended="onVideoEnded"
 
           :src="videoinfo.info.url"
 
           @timeupdate="timeUpdate"
 
-          :initial-time="timeStamp"
 
           @play="time"
 
         ></video>
 
-        <div class="jindu"></div>
 
+        <div v-if="is_complete" class="jindu"></div>
 
         <!-- </div> -->
 
         <div class="like">
 
           <div class="flex" @click="like" style="cursor: pointer">
 
@@ -189,6 +192,25 @@ const imgList = reactive({
 
   //banne图需要的数据
 
   list: [],
 
 });
 
+
 
+const is_complete = ref(0);
 
+is_complete.value = route.query.is_complete
 
+if (is_complete.value == 1) {
 
+  is_complete.value = 1;
 
+} else {
 
+  is_complete.value = 0;
 
+}
 
+
 
+const videoPlayer = ref(null);
 
+const play = () => {
 
+  if (videoPlayer.value) {
 
+    // 假设你有一个time变量记录了上次停止的时间
 
+    videoPlayer.value.currentTime = route.query.time;
 
+  }
 
+};
 
+
 
+onMounted(play);
 
+
 
 const course_id = ref("");
 
 const look = () => {
 
   router.replace({
 
@@ -404,6 +426,11 @@ onUnmounted(() => {
 
 </script>
 
 
 <style lang="scss" scoped>
 
+.scroll-container {
 
+  height: 100vh;
 
+  overflow-y: scroll;
 
+  overflow-x: hidden;
 
+}
 
 .jindu {
 
   width: 100%;
 
   height: 50px;
 
@@ -671,6 +698,12 @@ onUnmounted(() => {
 
     text-align: left;
 
     font-style: normal;
 
     cursor: pointer;
 
+    margin-left: 12px;
 
+  }
 
+  .returnimg{
 
+    width: 18px;
 
+    height: 18px;
 
+    color: #ffffff;
 
   }
 
 }
 
 </style>