画刊

src/views/bookShelf/components/MagazineSentence.vue

@@ -30,34 +30,35 @@
       class="content-inner"
       :style="{ background: themeList[sentenceTheme].contentBg }"
     >
-      <div
-        v-for="(itemC, indexC) in data[sentenceActive].tokens"
-        :key="indexC"
-        :class="[
-          'content-item',
-          (activeWordIndex === null &&
-            currentTime * 1000 <= data[sentenceActive].e &&
-            currentTime * 1000 >= data[sentenceActive].tokens[indexC].s) ||
-          activeWordIndex === indexC
-            ? 'active'
-            : '',
-        ]"
-        :style="{
-          color:
+      <template v-for="(itemC, indexC) in data[sentenceActive].tokens">
+        <div
+          :key="indexC"
+          :class="[
+            'content-item',
             (activeWordIndex === null &&
               currentTime * 1000 <= data[sentenceActive].e &&
               currentTime * 1000 >= data[sentenceActive].tokens[indexC].s) ||
             activeWordIndex === indexC
-              ? themeList[sentenceTheme].sentenceActiveColor
-              : themeList[sentenceTheme].sentenceColor,
-          fontSize: fontSize + 'px',
-          lineHeight: fontSize + 8 + 'px',
-          marginRight: itemC.a === '' ? '0' : '',
-        }"
-        @click="palyWord(indexC)"
-      >
-        {{ itemC.w }}
-      </div>
+              ? 'active'
+              : '',
+          ]"
+          :style="{
+            color:
+              (activeWordIndex === null &&
+                currentTime * 1000 <= data[sentenceActive].e &&
+                currentTime * 1000 >= data[sentenceActive].tokens[indexC].s) ||
+              activeWordIndex === indexC
+                ? themeList[sentenceTheme].sentenceActiveColor
+                : themeList[sentenceTheme].sentenceColor,
+            fontSize: fontSize + 'px',
+            lineHeight: fontSize + 8 + 'px',
+            marginRight: itemC.a === '' ? '0' : '',
+          }"
+          @click="palyWord(indexC)"
+        >
+          {{ itemC.w }}
+        </div>
+      </template>
     </div>
     <div class="sentence-bottom">
       <div
@@ -315,6 +316,7 @@ export default {
         _this.audio.pause();
         _this.isPlay = false;
         _this.currentTime = 0;
+        _this.activeWordIndex = null;
       }
     });
   },

src/views/bookShelf/index.vue

@@ -5,82 +5,115 @@
       :headerBorder="'#5C5C5C'"
       :userBg="'rgba(0, 0, 0, 0.24)'"
       :LoginNavIndex="1"
-    />   
+    />
     <ul class="option">
-        <li class="option-item" :class="[typeIndex===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(itemo,indexo)">
-            <svg-icon :icon-class="itemo.img" className="icon-img"></svg-icon>
-            <span>{{itemo.label}}</span>
-            <b>{{itemo.value===3?(itemo.number+orderPeruseNumber):itemo.number}}</b>
-        </li>
+      <li
+        class="option-item"
+        :class="[typeIndex === indexo ? 'active' : '']"
+        v-for="(itemo, indexo) in optionList"
+        :key="indexo"
+        @click="handleClick(itemo, indexo)"
+      >
+        <svg-icon :icon-class="itemo.img" className="icon-img"></svg-icon>
+        <span>{{ itemo.label }}</span>
+        <b>{{
+          itemo.value === 3 ? itemo.number + orderPeruseNumber : itemo.number
+        }}</b>
+      </li>
     </ul>
     <div class="main">
       <div class="searchChangebox">
         <div class="searchChange-box">
-            <div class="searchChange" :class="[item.sortName==sortField?'active':'']" v-for="(item,indexC) in changeList" :key="indexC">
-                <span>
-                    {{
-                        item.name
-                    }}
-                </span>
-                <div :class="['sort']">
-                    <div>
-                        <svg-icon icon-class="up" className="icon-up" :class="[item.sort=='up'?'active':'']" @click="SortEvent('up', item.name, item.sortName)"></svg-icon>
-                    </div>
-                    <div>
-                        <svg-icon icon-class="down" className="icon-down" :class="[item.sort=='down'?'active':'']" @click="SortEvent('down', item.name, item.sortName)"></svg-icon>
-                    </div>
-                </div>
+          <div
+            class="searchChange"
+            :class="[item.sortName == sortField ? 'active' : '']"
+            v-for="(item, indexC) in changeList"
+            :key="indexC"
+          >
+            <span>
+              {{ item.name }}
+            </span>
+            <div :class="['sort']">
+              <div>
+                <svg-icon
+                  icon-class="up"
+                  className="icon-up"
+                  :class="[item.sort == 'up' ? 'active' : '']"
+                  @click="SortEvent('up', item.name, item.sortName)"
+                ></svg-icon>
+              </div>
+              <div>
+                <svg-icon
+                  icon-class="down"
+                  className="icon-down"
+                  :class="[item.sort == 'down' ? 'active' : '']"
+                  @click="SortEvent('down', item.name, item.sortName)"
+                ></svg-icon>
+              </div>
             </div>
+          </div>
         </div>
-        
-        <el-input placeholder="输入名称" v-model="searchNameValue" class="input-search" maxlength="20">
-          <el-button slot="append" icon="el-icon-search" @click="getSearch"></el-button>
+
+        <el-input
+          placeholder="输入名称"
+          v-model="searchNameValue"
+          class="input-search"
+          maxlength="20"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="getSearch"
+          ></el-button>
         </el-input>
       </div>
-      <h5 class="show-title" v-if="typeIndex!==0">{{optionList[typeIndex].label}}<b>{{optionList[typeIndex].number}}</b></h5>
-      <div class="list" v-if="BookList.length>0">
+      <h5 class="show-title" v-if="typeIndex !== 0">
+        {{ optionList[typeIndex].label
+        }}<b>{{ optionList[typeIndex].number }}</b>
+      </h5>
+      <div class="list" v-if="BookList.length > 0">
         <!-- v-infinite-scroll="load" -->
         <div
-          v-for="(item,index) in BookList"
-          :key="index+'todayNew'"
+          v-for="(item, index) in BookList"
+          :key="index + 'todayNew'"
           v-infinite-scroll="load"
           infinite-scroll-disabled="disabled"
-          :class="[item.type===3?'book-item-peruse':'']"
+          :class="[item.type === 3 ? 'book-item-peruse' : '']"
         >
-            <template v-if="item.type===3">
-                <BookPeruseCard
-                    :item="item"
-                    type='bookShelf'
-                    :headerBg="'#1F1F1F'"
-                    :headerBorder="'#5C5C5C'"
-                    :userBg="'rgba(0, 0, 0, 0.24)'"
-                    :LoginNavIndex="1"
-                    :previousPage="'书架'"
-                />
-            </template>
-            <template v-if="item.type===30">
-                <BookPeruseListCard
-                    :item="item"
-                    type='bookShelf'
-                    :headerBg="'#1F1F1F'"
-                    :headerBorder="'#5C5C5C'"
-                    :userBg="'rgba(0, 0, 0, 0.24)'"
-                    :LoginNavIndex="1"
-                    :previousPage="'书架'"
-                />
-            </template>
-            <template v-else>
-                <BookCard
-                    :item="item"
-                    type='bookShelf'
-                    :headerBg="'#1F1F1F'"
-                    :headerBorder="'#5C5C5C'"
-                    :userBg="'rgba(0, 0, 0, 0.24)'"
-                    :LoginNavIndex="1"
-                    :previousPage="'书架'"
-                    :cardType="item.course_type"
-                />
-            </template>
+          <template v-if="item.type === 3">
+            <BookPeruseCard
+              :item="item"
+              type="bookShelf"
+              :headerBg="'#1F1F1F'"
+              :headerBorder="'#5C5C5C'"
+              :userBg="'rgba(0, 0, 0, 0.24)'"
+              :LoginNavIndex="1"
+              :previousPage="'书架'"
+            />
+          </template>
+          <template v-if="item.type === 30">
+            <BookPeruseListCard
+              :item="item"
+              type="bookShelf"
+              :headerBg="'#1F1F1F'"
+              :headerBorder="'#5C5C5C'"
+              :userBg="'rgba(0, 0, 0, 0.24)'"
+              :LoginNavIndex="1"
+              :previousPage="'书架'"
+            />
+          </template>
+          <template v-else>
+            <BookCard
+              :item="item"
+              type="bookShelf"
+              :headerBg="'#1F1F1F'"
+              :headerBorder="'#5C5C5C'"
+              :userBg="'rgba(0, 0, 0, 0.24)'"
+              :LoginNavIndex="1"
+              :previousPage="'书架'"
+              :cardType="item.course_type"
+            />
+          </template>
         </div>
         <p v-if="loading" class="tips">加载中...</p>
         <p v-if="noMore" class="tips">没有更多了</p>
@@ -97,9 +130,9 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
-import BookCard from "@/components/common/BookCard.vue"
-import BookPeruseCard from "@/components/common/BookPeruseCard.vue"
-import BookPeruseListCard from "@/components/common/BookPeruseListCard.vue"
+import BookCard from "@/components/common/BookCard.vue";
+import BookPeruseCard from "@/components/common/BookPeruseCard.vue";
+import BookPeruseListCard from "@/components/common/BookPeruseListCard.vue";
 import { getLogin } from "@/api/ajax";
 
 export default {
@@ -111,55 +144,55 @@ export default {
     return {
       BookList: [
         {
-            skeleton: true
+          skeleton: true,
         },
         {
-            skeleton: true
+          skeleton: true,
         },
         {
-            skeleton: true
+          skeleton: true,
         },
         {
-            skeleton: true
+          skeleton: true,
         },
         {
-            skeleton: true
-        }
+          skeleton: true,
+        },
       ],
       optionList: [
         {
-            label: '全部',
-            img: 'quanbu',
-            number: 0,
-            value: -1
+          label: "全部",
+          img: "quanbu",
+          number: 0,
+          value: -1,
         },
         {
-            label: '画刊',
-            img: 'huakan',
-            number: 0,
+          label: "画刊",
+          img: "huakan",
+          number: 0,
         },
         {
-            label: '报纸',
-            img: 'baozhi',
-            number: 0,
-            value: 2
+          label: "报纸",
+          img: "baozhi",
+          number: 0,
+          value: 2,
         },
         {
-            label: '练习册',
-            img: 'xiti',
-            number: 0
+          label: "练习册",
+          img: "xiti",
+          number: 0,
         },
         {
-            label: '课程',
-            img: 'kecheng',
-            number: 0,
-            value: 10
+          label: "课程",
+          img: "kecheng",
+          number: 0,
+          value: 10,
         },
         {
-            label: '精读',
-            img: 'jingdu',
-            number: 0,
-            value: 3
+          label: "精读",
+          img: "jingdu",
+          number: 0,
+          value: 3,
         },
         // ,
         // {
@@ -187,98 +220,104 @@ export default {
         },
       ],
       sortField: "",
-      searchNameValue: '', // 搜索名称值
+      searchNameValue: "", // 搜索名称值
       loading: false,
       noMore: false,
       pageNumber: 1,
       pageSize: 30,
       typeIndex: 0,
       orderPeruseNumber: 0, // 精读订阅个数
-    }
+    };
   },
   //计算属性 类似于data概念
   computed: {
-    disabled () {
-        return this.loading || this.noMore
-    }
+    disabled() {
+      return this.loading || this.noMore;
+    },
   },
   //监控data中数据变化
   watch: {},
   //方法集合
   methods: {
-    handleClick(item,index){
-        this.typeIndex = index
-        this.pageNumber = 1
-        if(item.hasOwnProperty("value")){
-            this.typeValue = item.value
-            if(item.number>0){
-                this.BookList = [
-                    {
-                        skeleton: true
-                    },
-                    {
-                        skeleton: true
-                    },
-                    {
-                        skeleton: true
-                    },
-                    {
-                        skeleton: true
-                    },
-                    {
-                        skeleton: true
-                    }
-                ]
-                this.getList()
-            }else{
-                this.BookList = []
-            }
-        }else{
-            this.BookList = []
-        }
-        
-        $(".list").animate({
-            scrollTop: 0
-        }, 200);
-    },
-    // 搜索查询
-    getSearch(){
-        this.pageNumber = 1
-        this.BookList = [
+    handleClick(item, index) {
+      this.typeIndex = index;
+      this.pageNumber = 1;
+      if (item.hasOwnProperty("value")) {
+        this.typeValue = item.value;
+        if (item.number > 0) {
+          this.BookList = [
             {
-                skeleton: true
+              skeleton: true,
             },
             {
-                skeleton: true
+              skeleton: true,
             },
             {
-                skeleton: true
+              skeleton: true,
             },
             {
-                skeleton: true
+              skeleton: true,
             },
             {
-                skeleton: true
-            }
-        ]
-        $(".list").animate({
-            scrollTop: 0
-        }, 200);
-        this.getList()
+              skeleton: true,
+            },
+          ];
+          this.getList();
+        } else {
+          this.BookList = [];
+        }
+      } else {
+        this.BookList = [];
+      }
+
+      $(".list").animate(
+        {
+          scrollTop: 0,
+        },
+        200
+      );
+    },
+    // 搜索查询
+    getSearch() {
+      this.pageNumber = 1;
+      this.BookList = [
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+      ];
+      $(".list").animate(
+        {
+          scrollTop: 0,
+        },
+        200
+      );
+      this.getList();
     },
     SortEvent(type, name, sortName) {
       let sort = "";
       this.changeList.forEach((item) => {
         if (item.name == name) {
-        //   if (!item.sort || item.sort == "up") {
-        //     item.sort = "down";
-        //     sort = "down";
-        //   } else if (item.sort == "down") {
-        //     item.sort = "up";
-        //     sort = "up";
-        //   }
-            item.sort = type;
-            sort = type;
+          //   if (!item.sort || item.sort == "up") {
+          //     item.sort = "down";
+          //     sort = "down";
+          //   } else if (item.sort == "down") {
+          //     item.sort = "up";
+          //     sort = "up";
+          //   }
+          item.sort = type;
+          sort = type;
         } else {
           item.sort = "";
         }
@@ -289,344 +328,353 @@ export default {
         this.sortType = 0;
       }
       this.sortField = sortName;
-      $(".list").animate({
-        scrollTop: 0
-      }, 200);
-      this.pageNumber = 1
-      this.getList()
+      $(".list").animate(
+        {
+          scrollTop: 0,
+        },
+        200
+      );
+      this.pageNumber = 1;
+      this.getList();
     },
     // 查询列表
-    getList(){
-        this.loading = true
-        let MethodName = "/ShopServer/Client/BookshelfQuery/PageQueryMyGoodsList";
-        let order_column_list = []
-        if(this.sortField !== ''){
-            if(this.sortType===1){
-                order_column_list = [this.sortField + ':desc']
-            }else if(this.sortType===0){
-                // 升序不传值
-                order_column_list = [this.sortField]
-            }
+    getList() {
+      this.loading = true;
+      let MethodName = "/ShopServer/Client/BookshelfQuery/PageQueryMyGoodsList";
+      let order_column_list = [];
+      if (this.sortField !== "") {
+        if (this.sortType === 1) {
+          order_column_list = [this.sortField + ":desc"];
+        } else if (this.sortType === 0) {
+          // 升序不传值
+          order_column_list = [this.sortField];
         }
-        let data = {
-            goods_name: this.searchNameValue.trim(),
-            goods_type: this.typeValue,
-            page_capacity:this.pageSize,
-            cur_page:this.pageNumber,
-            order_column_list: order_column_list
-        }
-        getLogin(MethodName, data)
+      }
+      let data = {
+        goods_name: this.searchNameValue.trim(),
+        goods_type: this.typeValue,
+        page_capacity: this.pageSize,
+        cur_page: this.pageNumber,
+        order_column_list: order_column_list,
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            if(res.status===1){
-                if(this.pageNumber===1){
-                    if(this.typeValue===-1||this.typeValue===3){
-                        getLogin('/ShopServer/Client/BookshelfQuery/GetMyValidPeriodList_Iread', {})
-                        .then((ress) => {
-                            if(ress.status===1){
-                                this.orderPeruseNumber = ress.valid_period_list.length
-                                ress.valid_period_list.forEach(items=>{
-                                    items.type = 30
-                                })
-                                this.BookList = ress.valid_period_list.concat(res.goods_list)
-                            }else{
-                                this.BookList = res.goods_list
-                            }
-                        })
-                    }else{
-                        this.BookList = res.goods_list
-                    }
-                    this.noMore = false
-                }else{
-                    this.BookList = this.BookList.concat(res.goods_list)
-                }
-                if(res.total_page<=this.pageNumber){
-                    this.noMore = true
-                }
+          this.loading = false;
+          if (res.status === 1) {
+            if (this.pageNumber === 1) {
+              if (this.typeValue === -1 || this.typeValue === 3) {
+                getLogin(
+                  "/ShopServer/Client/BookshelfQuery/GetMyValidPeriodList_Iread",
+                  {}
+                ).then((ress) => {
+                  if (ress.status === 1) {
+                    this.orderPeruseNumber = ress.valid_period_list.length;
+                    ress.valid_period_list.forEach((items) => {
+                      items.type = 30;
+                    });
+                    this.BookList = ress.valid_period_list.concat(
+                      res.goods_list
+                    );
+                  } else {
+                    this.BookList = res.goods_list;
+                  }
+                });
+              } else {
+                this.BookList = res.goods_list;
+              }
+              this.noMore = false;
+            } else {
+              this.BookList = this.BookList.concat(res.goods_list);
+            }
+            if (res.total_page <= this.pageNumber) {
+              this.noMore = true;
             }
+          }
         })
         .catch(() => {
-            this.loading = false
+          this.loading = false;
         });
-        
     },
-    load () {
-        this.pageNumber++
-        this.getList()
+    load() {
+      this.pageNumber++;
+      this.getList();
     },
     // 获取商品个数
-    getNumber(){
-        let MethodName = "/ShopServer/Client/BookshelfQuery/GetMyGoodsCount"
-        getLogin(MethodName, {}).then((res) => {
-            if(res.status===1){
-                this.optionList= [
-                    {
-                        label: '全部',
-                        img: 'quanbu',
-                        number: res.count_all,
-                        value: -1
-                    },
-                    {
-                        label: '画刊',
-                        img: 'huakan',
-                        number: 0,
-                    },
-                    {
-                        label: '报纸',
-                        img: 'baozhi',
-                        number: res.count_issue,
-                        value: 2
-                    },
-                    {
-                        label: '练习册',
-                        img: 'xiti',
-                        number: 0
-                    },
-                    {
-                        label: '课程',
-                        img: 'kecheng',
-                        number: res.count_course,
-                        value: 10
-                    },
-                    {
-                        label: '精读课堂',
-                        img: 'jingdu',
-                        number: res.count_iread,
-                        value: 3
-                    }
-                    // ,
-                    // {
-                    //     label: '合刊',
-                    //     img: 'hekan',
-                    //     number: '6'
-                    // }
-                ]
-            }
+    getNumber() {
+      let MethodName = "/ShopServer/Client/BookshelfQuery/GetMyGoodsCount";
+      getLogin(MethodName, {})
+        .then((res) => {
+          if (res.status === 1) {
+            this.optionList = [
+              {
+                label: "全部",
+                img: "quanbu",
+                number: res.count_all,
+                value: -1,
+              },
+              {
+                label: "画刊",
+                img: "huakan",
+                number: res.count_pictorial,
+              },
+              {
+                label: "报纸",
+                img: "baozhi",
+                number: res.count_issue,
+                value: 2,
+              },
+              {
+                label: "练习册",
+                img: "xiti",
+                number: 0,
+              },
+              {
+                label: "课程",
+                img: "kecheng",
+                number: res.count_course,
+                value: 10,
+              },
+              {
+                label: "精读课堂",
+                img: "jingdu",
+                number: res.count_iread,
+                value: 3,
+              },
+              // ,
+              // {
+              //     label: '合刊',
+              //     img: 'hekan',
+              //     number: '6'
+              // }
+            ];
+          }
         })
         .catch(() => {
-            this.loading = false
+          this.loading = false;
         });
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getNumber()
-    this.getList()
+    this.getNumber();
+    this.getList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    let _this = this
-    let input = document.querySelector('input');
-    input.addEventListener('keyup', function(event) {
-        // 判断是否按下回车键
-        if (event.keyCode === 13) {
-            // 回车键被按下，执行你想要的操作
-            _this.getList(1)
-        }
+    let _this = this;
+    let input = document.querySelector("input");
+    input.addEventListener("keyup", function (event) {
+      // 判断是否按下回车键
+      if (event.keyCode === 13) {
+        // 回车键被按下，执行你想要的操作
+        _this.getList(1);
+      }
     });
   },
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .bookShelf {
-  background: #F7F8FA;
+  background: #f7f8fa;
   height: calc(100vh - 64px);
-  .option{
+  .option {
     list-style: none;
     display: flex;
     justify-content: center;
     margin: 0;
     padding: 0;
-    background: #17171A;
-    li{
-        display: flex;
-        align-items: center;
-        border-radius: 30px;
-        height: 36px;
-        padding: 7px 20px;
-        margin: 8px 4px;
-        cursor: pointer;
-        &:hover{
-            background: rgba(255, 255, 255, 0.08);
-        }
-        &.active{
-            background: rgba(255, 255, 255, 0.08);
-            .icon-img,span,b{
-                color: rgba(255, 255, 255, 0.9);
-            }
-        }
-        .icon-img{
-            width: 14px;
-            height: 14px;
-            margin: 1px 8px 0 0;
-            color: rgba(255, 255, 255, 0.5);
-        }
-        span{
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 14px;
-            line-height: 22px;
-        }
-        b{
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-            color: rgba(255, 255, 255, 0.5);
-            margin-left: 5px;
+    background: #17171a;
+    li {
+      display: flex;
+      align-items: center;
+      border-radius: 30px;
+      height: 36px;
+      padding: 7px 20px;
+      margin: 8px 4px;
+      cursor: pointer;
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+      }
+      &.active {
+        background: rgba(255, 255, 255, 0.08);
+        .icon-img,
+        span,
+        b {
+          color: rgba(255, 255, 255, 0.9);
         }
+      }
+      .icon-img {
+        width: 14px;
+        height: 14px;
+        margin: 1px 8px 0 0;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      span {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 14px;
+        line-height: 22px;
+      }
+      b {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-left: 5px;
+      }
     }
   }
   .main {
     width: 1200px;
     margin: 0 auto;
     padding: 24px 0 0 0;
-    .searchChangebox{
+    .searchChangebox {
+      display: flex;
+      justify-content: space-between;
+      .searchChange-box {
         display: flex;
+      }
+      .searchChange {
+        display: flex;
+        align-items: center;
         justify-content: space-between;
-        .searchChange-box{
-            display: flex;
-        }
-        .searchChange {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 4px 12px;
-            height: 32px;
-            margin-right: 16px;
-            border: 1px solid #E5E6EB;
-            border-radius: 20px;
-            &.active{
-                background: #175DFF;
-                > span{
-                    color: #FFFFFF;
-                }
-                .sort {
-                    > div {
-                        svg{
-                            color: #5E89EF;
-                            &.active{
-                                color: #FFFFFF;
-                            }
-                        }
-                    }
-                }
-            }
-            > span{
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 22px;
-                color: #000;
-                margin-right: 4px;
-            }
-            .sort {
-                cursor: pointer;
-                height: 20px;
-                > div {
-                    font-size: 0;
-                    svg {
-                        width: 11px;
-                        height: 11px;
-                        color: #C2C2C2;
-                        padding: 3px 2px 2px 2px;
-                        &.icon-down{
-                            height: 9px;
-                            padding: 0 2px 2px 2px;
-                        }
-                    }
+        padding: 4px 12px;
+        height: 32px;
+        margin-right: 16px;
+        border: 1px solid #e5e6eb;
+        border-radius: 20px;
+        &.active {
+          background: #175dff;
+          > span {
+            color: #ffffff;
+          }
+          .sort {
+            > div {
+              svg {
+                color: #5e89ef;
+                &.active {
+                  color: #ffffff;
                 }
+              }
             }
+          }
         }
-        .input-search{
-            width: 220px;
+        > span {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 22px;
+          color: #000;
+          margin-right: 4px;
         }
-    }
-    .show-title{
-        color: #1F2C5C;
-        margin: 24px 0 0 0;
-        font-weight: 500;
-        font-size: 24px;
-        line-height: 32px;
-        b{
-            margin-left: 16px;
-            color: #ED5F00;
+        .sort {
+          cursor: pointer;
+          height: 20px;
+          > div {
+            font-size: 0;
+            svg {
+              width: 11px;
+              height: 11px;
+              color: #c2c2c2;
+              padding: 3px 2px 2px 2px;
+              &.icon-down {
+                height: 9px;
+                padding: 0 2px 2px 2px;
+              }
+            }
+          }
         }
+      }
+      .input-search {
+        width: 220px;
+      }
+    }
+    .show-title {
+      color: #1f2c5c;
+      margin: 24px 0 0 0;
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 32px;
+      b {
+        margin-left: 16px;
+        color: #ed5f00;
+      }
     }
     .list {
-        margin: 28px -25px 0 -25px;
-        display: flex;
-        flex-wrap: wrap;
-        height: calc(100vh - 256px);
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        > div {
-            width: 200px;
-            height: 352px;
-            border-radius: 8px;
-            overflow: hidden;
-            background: #ffffff;
-            margin: 0 25px 24px 25px;
-            &.book-item-peruse{
-                width: 200px;
-                height: 298px;
-                margin-top: 54px;
-            }
-        }
-        .tips{
-            width: 100%;
-            text-align: center;
-            font-size: 12px;
-            color: #929CA8;
+      margin: 28px -25px 0 -25px;
+      display: flex;
+      flex-wrap: wrap;
+      height: calc(100vh - 256px);
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      > div {
+        width: 200px;
+        height: 352px;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #ffffff;
+        margin: 0 25px 24px 25px;
+        &.book-item-peruse {
+          width: 200px;
+          height: 298px;
+          margin-top: 54px;
         }
+      }
+      .tips {
+        width: 100%;
+        text-align: center;
+        font-size: 12px;
+        color: #929ca8;
+      }
     }
   }
 }
 </style>
 <style lang="scss">
-.bookShelf{
-    .searchChangebox{
-        .input-search{
-            .el-input__inner{
-                height: 32px;
-                color: #1D2129;
-                background: #F2F3F5;
-                border: none;
-                line-height: 32px;
-            }
-            .el-input-group__append{
-                border: none;
-                width: 32px;
-                height: 32px;
-                background: #165DFF;
-                text-align: center;
-                cursor: pointer;
-                &:hover{
-                    background: #4080FF;
-                }
-                &:focus{
-                    background: #0E42D2;
-                }
-            }
-            .el-button{
-                padding: 10px 12px;
-                color: #ffffff;
-            }
+.bookShelf {
+  .searchChangebox {
+    .input-search {
+      .el-input__inner {
+        height: 32px;
+        color: #1d2129;
+        background: #f2f3f5;
+        border: none;
+        line-height: 32px;
+      }
+      .el-input-group__append {
+        border: none;
+        width: 32px;
+        height: 32px;
+        background: #165dff;
+        text-align: center;
+        cursor: pointer;
+        &:hover {
+          background: #4080ff;
+        }
+        &:focus {
+          background: #0e42d2;
         }
+      }
+      .el-button {
+        padding: 10px 12px;
+        color: #ffffff;
+      }
     }
+  }
 }
-</style>
+</style>

src/views/bookShelf/magazineDetail.vue

@@ -118,8 +118,9 @@
       :visible.sync="mageazineDetailShow"
       :show-close="false"
       :close-on-click-modal="false"
-      width="500px"
+      width="1200px"
       class="login-dialog magazine-detail-dialog"
+      :modal="false"
       v-if="mageazineDetailShow"
     >
       <magazine-sentence
@@ -154,377 +155,13 @@ export default {
   data() {
     //这里存放数据
     return {
-      magazineList: [
-        {
-          img: require("../../assets/ed88685cd9fe892adb12382427d3c429.jpg"),
-          positionList: [
-            {
-              width: "270px",
-              height: "140px",
-              x: "390px",
-              y: "37px",
-            },
-            {
-              width: "288px",
-              height: "120px",
-              x: "500px",
-              y: "237px",
-            },
-            {
-              width: "130px",
-              height: "100px",
-              x: "525px",
-              y: "587px",
-            },
-          ],
-          sentenceList: [
-            {
-              sentence: "I have a super ‘mouth’",
-              wordList: ["I", "have", "a", "super", "‘mouth’"],
-              s: 21500,
-              e: 24000,
-              timeList: [
-                {
-                  s: 21500,
-                  e: 21800,
-                },
-                {
-                  s: 21800,
-                  e: 22200,
-                },
-                {
-                  s: 22200,
-                  e: 22400,
-                },
-                {
-                  s: 22400,
-                  e: 22900,
-                },
-                {
-                  s: 22900,
-                  e: 24000,
-                },
-              ],
-            },
-            {
-              sentence:
-                "I am a shoebill (鲸头鹳). I live in Africa (非洲). I get my name because of my big bill (鸟喙). Does it look like a Dutch clog (荷兰木屐)?",
-              wordList: [
-                "I",
-                "am",
-                "a",
-                "shoebill (鲸头鹳).",
-                "I",
-                "live",
-                "in",
-                "Africa (非洲).",
-                "I",
-                "get",
-                "my",
-                "name",
-                "because",
-                "of",
-                "my",
-                "big",
-                "bill (鸟喙).",
-                "Does",
-                "it",
-                "look",
-                "like",
-                "a",
-                "Dutch",
-                "clog (荷兰木屐)?",
-              ],
-              s: 35000,
-              e: 46300,
-              timeList: [
-                {
-                  s: 35000,
-                  e: 35400,
-                },
-                {
-                  s: 35400,
-                  e: 35600,
-                },
-                {
-                  s: 35600,
-                  e: 36000,
-                },
-                {
-                  s: 36000,
-                  e: 37000,
-                },
-                {
-                  s: 37000,
-                  e: 37300,
-                },
-                {
-                  s: 37300,
-                  e: 37600,
-                },
-                {
-                  s: 37600,
-                  e: 37900,
-                },
-                {
-                  s: 38000,
-                  e: 38900,
-                },
-                {
-                  s: 39200,
-                  e: 39400,
-                },
-                {
-                  s: 39400,
-                  e: 39800,
-                },
-                {
-                  s: 39800,
-                  e: 40400,
-                },
-                {
-                  s: 40400,
-                  e: 40900,
-                },
-                {
-                  s: 40900,
-                  e: 41700,
-                },
-                {
-                  s: 41700,
-                  e: 41900,
-                },
-                {
-                  s: 41900,
-                  e: 42500,
-                },
-                {
-                  s: 42500,
-                  e: 42900,
-                },
-                {
-                  s: 42900,
-                  e: 43800,
-                },
-                {
-                  s: 43800,
-                  e: 44200,
-                },
-                {
-                  s: 44200,
-                  e: 44500,
-                },
-                {
-                  s: 44500,
-                  e: 44800,
-                },
-                {
-                  s: 44800,
-                  e: 45000,
-                },
-                {
-                  s: 45000,
-                  e: 45200,
-                },
-                {
-                  s: 45200,
-                  e: 45600,
-                },
-                {
-                  s: 45600,
-                  e: 46300,
-                },
-              ],
-            },
-            {
-              sentence: "My bill is important. It helps me a lot.",
-              wordList: [
-                "My",
-                "bill",
-                "is",
-                "important.",
-                "It",
-                "helps",
-                "me",
-                "a",
-                "lot.",
-              ],
-              s: 48000,
-              e: 52000,
-              timeList: [
-                {
-                  s: 48000,
-                  e: 48400,
-                },
-                {
-                  s: 48400,
-                  e: 48700,
-                },
-                {
-                  s: 48700,
-                  e: 48900,
-                },
-                {
-                  s: 48900,
-                  e: 49900,
-                },
-                {
-                  s: 49900,
-                  e: 50200,
-                },
-                {
-                  s: 50200,
-                  e: 50800,
-                },
-                {
-                  s: 50800,
-                  e: 51100,
-                },
-                {
-                  s: 51100,
-                  e: 51400,
-                },
-                {
-                  s: 51400,
-                  e: 52000,
-                },
-              ],
-            },
-          ],
-        },
-        {
-          img: require("../../assets/f70b022cce193716cc091e5c8c54d6e5.jpg"),
-        },
-      ],
-      art_sound_url: require("../../assets/21hk_99_165420_1.mp3"),
+      magazineList: [],
       activePage: 0, // 当前显示第几页
       magazineVideoShow: false, // 讲解视频是否显示
       mageazineDetailIndex: null, // 当前画刊高亮第几个
       mageazineDetailShow: false,
       fontSize: 32,
       sentenceTheme: 0,
-      sentenceList: [
-        {
-          sentence:
-            "With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
-          wordList: [
-            "With",
-            "a",
-            "lot",
-            "of",
-            "water",
-            "in",
-            "a",
-            "cactus'",
-            "body,",
-            "a",
-            "grown-up",
-            "plant",
-            "may",
-            "weigh",
-            "6",
-            "tons",
-            "or",
-            "more.",
-            "That's",
-            "as",
-            "heavy",
-            "as",
-            "an",
-            "elephant!",
-          ],
-        },
-        {
-          sentence:
-            "With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
-          wordList: [
-            "With",
-            "a",
-            "lot",
-            "of",
-            "water",
-            "in",
-            "a",
-            "cactus'",
-            "body,",
-            "a",
-            "grown-up",
-            "plant",
-            "may",
-            "weigh",
-            "6",
-            "tons",
-            "or",
-            "more.",
-            "That's",
-            "as",
-            "heavy",
-            "as",
-            "an",
-            "elephant!",
-          ],
-        },
-        {
-          sentence:
-            "With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
-          wordList: [
-            "With",
-            "a",
-            "lot",
-            "of",
-            "water",
-            "in",
-            "a",
-            "cactus'",
-            "body,",
-            "a",
-            "grown-up",
-            "plant",
-            "may",
-            "weigh",
-            "6",
-            "tons",
-            "or",
-            "more.",
-            "That's",
-            "as",
-            "heavy",
-            "as",
-            "an",
-            "elephant!",
-          ],
-        },
-        {
-          sentence:
-            "With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
-          wordList: [
-            "With",
-            "a",
-            "lot",
-            "of",
-            "water",
-            "in",
-            "a",
-            "cactus'",
-            "body,",
-            "a",
-            "grown-up",
-            "plant",
-            "may",
-            "weigh",
-            "6",
-            "tons",
-            "or",
-            "more.",
-            "That's",
-            "as",
-            "heavy",
-            "as",
-            "an",
-            "elephant!",
-          ],
-        },
-      ],
       ed: undefined,
       showEd: false, //是否看ed的值
       curTime: 0, //单位s
@@ -800,6 +437,10 @@ export default {
       0px 8px 10px -5px rgba(0, 0, 0, 0.08);
     border-radius: 16px;
     border: none;
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    margin-left: -600px;
   }
 }
 </style>