From 292412033f692f7eed679e1c935dfd96e378cf4d Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Mon, 4 Nov 2024 19:01:08 +0800
Subject: [PATCH] no message

---
 css/school.css           |  49 +++++-
 css/school.less          |  58 ++++++-
 html/school.html         | 322 ++++++++++++++++++++-------------------
 img/triangle-QS.svg      |   6 +
 img/triangle-Soft.svg    |   6 +
 img/triangle-TIMES.svg   |  12 ++
 img/triangle-US-News.svg |   6 +
 js/base.js               |  11 +-
 8 files changed, 306 insertions(+), 164 deletions(-)
 create mode 100644 img/triangle-QS.svg
 create mode 100644 img/triangle-Soft.svg
 create mode 100644 img/triangle-TIMES.svg
 create mode 100644 img/triangle-US-News.svg

diff --git a/css/school.css b/css/school.css
index af77fce..60fc4b0 100644
--- a/css/school.css
+++ b/css/school.css
@@ -1,6 +1,5 @@
 .boxbox {
   width: 1200px;
-  height: 396px;
   background-color: #fbfbfb;
   border-radius: 12px;
   position: relative;
@@ -147,8 +146,30 @@
   justify-content: space-between;
   padding: 6px;
 }
+.boxbox .details .right .brief .brief-dom {
+  color: transparent;
+  pointer-events: none;
+  position: fixed;
+  top: -100000%;
+  width: 898px;
+  word-break: keep-all;
+}
+.boxbox .details .right .brief.brief-show {
+  transition: all 0.3s;
+  height: auto;
+  flex-direction: column;
+}
+.boxbox .details .right .brief.brief-show .text {
+  white-space: break-spaces;
+  margin-right: 0;
+  margin-bottom: 15px;
+}
+.boxbox .details .right .brief.brief-show .img {
+  transform: rotate(180deg);
+}
 .boxbox .details .right .brief .text {
   margin-right: 15px;
+  width: 898px;
 }
 .boxbox .details .right .brief .img {
   width: 16px;
@@ -183,15 +204,19 @@
 .hot .list {
   width: 1152px;
   margin-bottom: 10px;
+  overflow: hidden;
 }
 .hot .list .list-item {
+  width: 1152px;
+  grid-column-gap: 66px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
 }
 .hot .list .list-item .item {
   padding: 22px 0;
   width: 510px;
-  margin-left: 20px;
+  height: 90px;
+  margin-left: 33px;
 }
 .hot .list .list-item .item:not(:nth-last-child(-n + 2)) {
   border-bottom: 1px dotted #ebebeb;
@@ -258,6 +283,14 @@
   width: 18px;
   height: 8px;
 }
+.hot .list .list-item .item .operate .select-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  top: 0;
+  left: 0;
+}
 .hot .list .list-item .item .operate .select {
   position: absolute;
   right: 40px;
@@ -334,6 +367,9 @@
   height: 12px;
   cursor: pointer;
 }
+.hot .indicate .icon.btn-right {
+  transform: rotate(180deg);
+}
 .hot .indicate .text {
   color: #555555;
   font-size: 13px;
@@ -400,6 +436,7 @@
 }
 .content .body .right .screen .list {
   flex-wrap: wrap;
+  justify-content: left;
 }
 .content .body .right .screen .list .item {
   width: fit-content;
@@ -513,6 +550,14 @@
   width: 18px;
   height: 8px;
 }
+.content .body .right .list .item .operate .select-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  top: 0;
+  left: 0;
+}
 .content .body .right .list .item .operate .select {
   position: absolute;
   top: -18px;
diff --git a/css/school.less b/css/school.less
index 909f4ef..8e8ddb4 100644
--- a/css/school.less
+++ b/css/school.less
@@ -1,6 +1,6 @@
 .boxbox {
     width: 1200px;
-    height: 396px;
+    // height: 396px;
     background-color: rgba(251, 251, 251, 1);
     border-radius: 12px;
     position: relative;
@@ -148,7 +148,6 @@
             }
 
             .brief {
-                // width: 946px;
                 height: 40px;
                 background-color: rgba(246, 246, 246, 1);
                 border-radius: 6px;
@@ -161,8 +160,33 @@
                 justify-content: space-between;
                 padding: 6px;
 
+                .brief-dom {
+                    color: transparent;
+                    pointer-events: none;
+                    position: fixed;
+                    top: -100000%;
+                    width: 898px;
+                    word-break: keep-all;
+                }
+
+                &.brief-show {
+                    transition: all 0.3s;
+                    height: auto;
+                    flex-direction: column;
+                    .text {
+                        white-space: break-spaces;
+                        margin-right: 0;
+                        margin-bottom: 15px;
+                    }
+
+                    .img {
+                        transform: rotate(180deg);
+                    }
+                }
+
                 .text {
                     margin-right: 15px;
+                    width: 898px;
                 }
 
                 .img {
@@ -204,13 +228,17 @@
     .list {
         width: 1152px;
         margin-bottom: 10px;
+        overflow: hidden;
         .list-item {
+            width: 1152px;
+            grid-column-gap: 66px;
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             .item {
                 padding: 22px 0;
                 width: 510px;
-                margin-left: 20px;
+                height: 90px;
+                margin-left: 33px;
                 &:not(:nth-last-child(-n + 2)) {
                     border-bottom: 1px dotted #ebebeb;
                 }
@@ -286,6 +314,15 @@
                             height: 8px;
                         }
                     }
+                    .select-mask {
+                        position: fixed;
+                        width: 100%;
+                        height: 100%;
+                        z-index: 2;
+                        top: 0;
+                        left: 0;
+                    }
+
                     .select {
                         position: absolute;
                         right: 40px;
@@ -373,6 +410,10 @@
             width: 7px;
             height: 12px;
             cursor: pointer;
+
+            &.btn-right {
+                transform: rotate(180deg);
+            }
         }
         .text {
             color: #555555;
@@ -448,6 +489,7 @@
 
                 .list {
                     flex-wrap: wrap;
+                    justify-content: left;
                     .item {
                         width: fit-content;
                         height: 36px;
@@ -567,8 +609,16 @@
                                 height: 8px;
                             }
                         }
+                        .select-mask {
+                            position: fixed;
+                            width: 100%;
+                            height: 100%;
+                            z-index: 2;
+                            top: 0;
+                            left: 0;
+                        }
                         .select {
-                            position: absolute; 
+                            position: absolute;
                             top: -18px;
                             right: -24px;
                             width: 285px;
diff --git a/html/school.html b/html/school.html
index 9ca6a06..9d9dd0e 100644
--- a/html/school.html
+++ b/html/school.html
@@ -6,18 +6,28 @@
         <title>Document</title>
         <link rel="stylesheet" href="/css/common.css" />
         <link rel="stylesheet" href="/css/school.css" />
+
+        <script src="/js/axios.min.js"></script>
+        <script src="/js/vue.global.js"></script>
+        <script src="/js/common.js"></script>
+        <script src="/js/base.js"></script>
+        <style>
+            [v-cloak] {
+                display: none;
+            }
+        </style>
     </head>
     <body>
-        <div class="main">
+        <div id="app" class="main">
             <img class="index-icon" src="/img/index-icon.png" />
 
-            <div style="display: none;" class="box">
+            <div class="boxbox">
                 <div class="tab flexacenter">
                     首页
                     <img class="img" src="/img/arrows.svg" />
                     按学校查看
                     <img class="img" src="/img/arrows.svg" />
-                    <div class="current">香港大学</div>
+                    <div class="current">{{ info.name }}</div>
                 </div>
                 <div class="details flexflex">
                     <div class="logo flexcenter">
@@ -25,8 +35,8 @@
                         <img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
                     </div>
                     <div class="right">
-                        <div class="name">香港大学</div>
-                        <div class="name-en">The University of Hong Kong</div>
+                        <div class="name">{{ info.name }}</div>
+                        <div class="name-en">{{ info.enname }}</div>
                         <div class="world">
                             <div class="head flexcenter">
                                 <div class="icon flexcenter">
@@ -34,21 +44,22 @@
                                 </div>
                             </div>
                             <div class="list flexacenter">
-                                <div class="item flex1 flexacenter">
+                                <div class="item flex1 flexacenter" v-for="item in info.ranks">
                                     <div class="quantity">16</div>
                                     <div class="ranking-name">
-                                        QS
-                                        <img class="ranking-icon" src="https://app.gter.net/image/miniApp/offer/triangle-QS.svg" />
-                                        <!-- <image wx:if="{{ item.mechanism == '泰晤士' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-TIMES.svg"></image>
-                                        <image wx:if="{{ item.mechanism == 'USNEWS' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-US-News.svg"></image>
-                                        <image wx:if="{{ item.mechanism == '软科' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-Soft.svg"></image> -->
+                                        {{ item.mechanism }}
+                                        <img v-if="item.mechanism == 'QS'" class="ranking-icon" src="/img/triangle-QS.svg" />
+                                        <img v-if="item.mechanism == '泰晤士'" class="ranking-icon" src="/img/triangle-TIMES.svg" />
+                                        <img v-if="item.mechanism == 'USNEWS'" class="ranking-icon" src="/img/triangle-US-News.svg" />
+                                        <img v-if="item.mechanism == '软科'" class="ranking-icon" src="/img/triangle-Soft.svg" />
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="brief">
-                            <div class="text">香港大学简称为“港大”、“HKU”，是一所位处中华人民共和国香港特别行政区的公立研究型大学，其奠基于1910年3月16日，次年3月30日…</div>
-                            <img class="img" src="/img/arrows-gray-icon.png" />
+                        <div class="brief" :style="{'height': (briefShow?briefHeight : 40) + 'px'}" :class="{'brief-show': briefShow}">
+                            <div ref="briefRef" class="brief-dom">{{ info.message }}</div>
+                            <div class="text one-line-display">{{ info.message }}</div>
+                            <img class="img" @click="cutBriefShow" src="/img/arrows-gray-icon.png" />
                         </div>
                     </div>
                 </div>
@@ -62,13 +73,13 @@
                     </div>
                     热门项目
                 </div>
-                <div class="list">
-                    <div class="list-item">
-                        <div class="item flexacenter">
+                <div class="list flexflex" ref="hotListRef">
+                    <div class="list-item" v-for="(item,index) in  hotList">
+                        <div class="item flexacenter" v-for="(item,i) in item">
                             <div class="left flex1">
-                                <div class="name">教育学硕士</div>
+                                <div class="name">{{ item.name_zh }}</div>
                                 <div class="text flexacenter">
-                                    Master of Education
+                                    {{ item.name_en }}
                                     <div class="ranking flexacenter">
                                         <div class="vertical">|</div>
                                         专业排名
@@ -78,142 +89,24 @@
                             </div>
 
                             <div class="operate flexcenter">
-                                <div style="display: none;" class="circle flexcenter">
-                                    <img class="img-add" src="/img/add-thick.svg" />
-                                </div>
-                                <div style="display: none;" class="circle flexcenter">
-                                    <img class="img-dot" src="/img/dot-dot-dot.png" />
-                                </div>
-                                <div style="display: none;" class="select flexflex show">
-                                    <div class="title flexacenter">
-                                        <div class="dot"></div>
-                                        该项目已加入对比单，未加入项目管理
-                                    </div>
-                                    <div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
-                                </div>
-                                <div style="display: none;" class="already flexacenter">
+                                <div v-if="item.contraststatus == 1" class="already flexacenter">
                                     <div class="tick-box flexcenter">
                                         <img class="img-tick" src="/img/tick-icon.svg" />
                                     </div>
                                     已加入
                                 </div>
-                            </div>
-                        </div>
-                        <div class="item flexacenter">
-                            <div class="left flex1">
-                                <div class="name">教育学硕士</div>
-                                <div class="text flexacenter">
-                                    Master of Education
-                                    <div class="ranking flexacenter">
-                                        <div class="vertical">|</div>
-                                        专业排名
-                                        <div class="number">52</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="operate flexcenter">
-                                <div style="display: none;" class="circle flexcenter">
+                                <div v-else class="circle flexcenter" :class="'add' + item.random" @click.stop="handleClick('hot',item,index,i)">
                                     <img class="img-add" src="/img/add-thick.svg" />
                                 </div>
-                                <div style="display: flex;" class="circle flexcenter">
-                                    <img class="img-dot" src="/img/dot-dot-dot.png" />
-                                </div>
-                                <div style="display: none;" class="select flexflex show">
-                                    <div class="title flexacenter">
-                                        <div class="dot"></div>
-                                        该项目已加入对比单，未加入项目管理
-                                    </div>
-                                    <div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
-                                    <!-- <div class="bottom"></div> -->
-                                </div>
-                                <div style="display: none;" class="already flexacenter">
-                                    <div class="tick-box flexcenter">
-                                        <img class="img-tick" src="/img/tick-icon.svg" />
-                                    </div>
-                                    已加入
-                                </div>
-                            </div>
-                        </div>
-                        <div class="item flexacenter">
-                            <div class="left flex1">
-                                <div class="name">教育学硕士</div>
-                                <div class="text flexacenter">
-                                    Master of Education
-                                    <div class="ranking flexacenter">
-                                        <div class="vertical">|</div>
-                                        专业排名
-                                        <div class="number">52</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="operate flexcenter">
-                                <div style="display: none;" class="circle flexcenter">
-                                    <img class="img-add" src="/img/add-thick.svg" />
-                                </div>
-                                <div style="display: flex;" class="circle flexcenter">
-                                    <img class="img-dot" src="/img/dot-dot-dot.png" />
-                                </div>
-                                <div style="display: none;" class="select flexflex show">
-                                    <div class="title flexacenter">
-                                        <div class="dot"></div>
-                                        该项目已加入对比单，未加入项目管理
-                                    </div>
-                                    <div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
-                                    <!-- <div class="bottom"></div> -->
-                                </div>
-                                <div style="display: none;" class="already flexacenter">
-                                    <div class="tick-box flexcenter">
-                                        <img class="img-tick" src="/img/tick-icon.svg" />
-                                    </div>
-                                    已加入
-                                </div>
-                            </div>
-                        </div>
-                        <div class="item flexacenter">
-                            <div class="left flex1">
-                                <div class="name">教育学硕士</div>
-                                <div class="text flexacenter">
-                                    Master of Education
-                                    <div class="ranking flexacenter">
-                                        <div class="vertical">|</div>
-                                        专业排名
-                                        <div class="number">52</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="operate flexcenter">
-                                <div style="display: none;" class="circle flexcenter">
-                                    <img class="img-add" src="/img/add-thick.svg" />
-                                </div>
-                                <div style="display: flex;" class="circle flexcenter">
-                                    <img class="img-dot" src="/img/dot-dot-dot.png" />
-                                </div>
-                                <div style="display: none;" class="select flexflex show">
-                                    <div class="title flexacenter">
-                                        <div class="dot"></div>
-                                        该项目已加入对比单，未加入项目管理
-                                    </div>
-                                    <div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
-                                    <!-- <div class="bottom"></div> -->
-                                </div>
-                                <div style="display: none;" class="already flexacenter">
-                                    <div class="tick-box flexcenter">
-                                        <img class="img-tick" src="/img/tick-icon.svg" />
-                                    </div>
-                                    已加入
-                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="indicate flexcenter">
-                    <img class="icon" src="/img/arrows-triangle-gray.svg" />
-                    <div class="text">1/3</div>
-                    <img class="icon" src="/img/arrows-triangle-blue.svg" />
+                    <img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
+                    <div class="text">{{ hotListPage }}/{{ hotListTotalPage }}</div>
+                    <img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
                 </div>
             </div>
 
@@ -293,18 +186,139 @@
             </div>
 
             <!-- 底部 -->
-            <div class="base flexcenter">
-                <div class="left flexacenter">
-                    <div class="text flex1">搜索项目</div>
-                    <img class="img" src="/img/search-black-icon.svg" />
-                </div>
-                <div class="rigth flexacenter">
-                    <img class="img" src="/img/contrast-icon.png" />
-                    <div class="text">项目对比</div>
-                    <div class="number">16</div>
-                </div>
-            </div>
+            <base-bottom ref="baseRef"></base-bottom>
         </div>
-    
+
+        <script>
+            const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
+            const projectSchool = createApp({
+                setup() {
+                    onMounted(() => {
+                        console.log("onMounted")
+
+                        getinit()
+                    })
+
+                    let id = 309
+
+                    let info = ref({})
+                    let hotList = ref([])
+                    let discipline = ref([])
+                    let universitydepartment = ref([])
+
+                    const getinit = () => {
+                        $ajaxget("/api/project.university/getInfo", {
+                            id,
+                        }).then(res => {
+                            if (res.code != 200) return
+                            const data = res.data
+                            let list = data.hot_projects || []
+                            list.forEach(element => {
+                                element["random"] = randomString(6)
+                            })
+
+                            // 将一维数组转换成二维数组，每两个元素为一组
+                            let twoDimensionalArray = []
+                            for (let i = 0; i < list.length; i += 4) {
+                                twoDimensionalArray.push(list.slice(i, i + 4))
+                            }
+
+                            console.log("twoDimensionalArray", twoDimensionalArray)
+                            info.value = data.info
+                            hotList.value = twoDimensionalArray
+                            hotListTotalPage.value = twoDimensionalArray.length
+                            discipline.value = data.discipline
+                            universitydepartment.value = data.universitydepartment || []
+
+                            // wx.nextTick(() => this.getBriefHeight())
+
+                            nextTick(() => {
+                                getBriefHeight()
+                            })
+                        })
+                    }
+
+                    const briefRef = ref(null)
+                    let briefHeight = ref(40)
+                    let briefShow = ref(false)
+
+                    const getBriefHeight = () => {
+                        briefHeight.value = briefRef.value.clientHeight + 16 + 12 + 15
+                    }
+
+                    const cutBriefShow = () => {
+                        briefShow.value = !briefShow.value
+                    }
+
+                    let hotListPage = ref(1)
+                    let hotListTotalPage = ref(0) // 总页数
+
+                    let hotListRef = ref(null)
+                    const cutHotListPage = type => {
+                        if (type == "left") {
+                            if (hotListPage.value > 1) hotListPage.value--
+                        } else {
+                            if (hotListPage.value < hotListTotalPage.value) hotListPage.value++
+                        }
+                        hotListRef.value.scrollTo({
+                            left: 1152 * (hotListPage.value - 1),
+                            behavior: "smooth",
+                        })
+                    }
+
+                    // 计算
+                    const reversedMessage = type => {
+                        if (type == "left") {
+                            if (hotListPage.value == 1) return "/img/arrows-triangle-gray.svg"
+                            else return "/img/arrows-triangle-blue.png"
+                        } else {
+                            if (hotListPage.value == hotListTotalPage.value) return "/img/arrows-triangle-gray.svg"
+                            else return "/img/arrows-triangle-blue.png"
+                        }
+                    }
+
+                    const baseRef = ref(null)
+
+                    // 点击事件
+                    const handleClick = (type, item, index, i) => {
+                        const random = item.random
+
+                        if (item.status == 1) return
+                        $ajax("/api/project.contrast/add", {
+                            projectid: item.id,
+                        }).then(res => {
+                            baseRef.value.calculate(random, res.data.count)
+
+                            if (type == "hot") hotList.value[index][i]["contraststatus"] = 1
+
+                           
+                        })
+                    }
+
+                    return {
+                        info,
+                        hotList,
+                        discipline,
+                        universitydepartment,
+                        briefShow,
+                        cutBriefShow,
+                        briefRef,
+                        briefHeight,
+
+                        hotListPage,
+                        hotListTotalPage,
+                        cutHotListPage,
+                        reversedMessage,
+                        hotListRef,
+                        handleClick,
+
+                        baseRef,
+                    }
+                },
+            })
+            projectSchool.component("base-bottom", base)
+
+            projectSchool.mount("#app")
+        </script>
     </body>
 </html>
diff --git a/img/triangle-QS.svg b/img/triangle-QS.svg
new file mode 100644
index 0000000..07f0e7b
--- /dev/null
+++ b/img/triangle-QS.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -253 -494 )">
+    <path d="M 261 502  L 253 494  L 253 502  L 261 502  Z " fill-rule="nonzero" fill="#f7a602" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/triangle-Soft.svg b/img/triangle-Soft.svg
new file mode 100644
index 0000000..8520eee
--- /dev/null
+++ b/img/triangle-Soft.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -523 -494 )">
+    <path d="M 531 502  L 523 494  L 523 502  L 531 502  Z " fill-rule="nonzero" fill="#e5122d" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/triangle-TIMES.svg b/img/triangle-TIMES.svg
new file mode 100644
index 0000000..d55e4d6
--- /dev/null
+++ b/img/triangle-TIMES.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="354" y1="494" x2="362" y2="509" id="LinearGradient25">
+      <stop id="Stop26" stop-color="#fc392d" offset="0" />
+      <stop id="Stop27" stop-color="#3948ff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -354 -494 )">
+    <path d="M 362 502  L 354 494  L 354 502  L 362 502  Z " fill-rule="nonzero" fill="url(#LinearGradient25)" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/triangle-US-News.svg b/img/triangle-US-News.svg
new file mode 100644
index 0000000..c8a40e3
--- /dev/null
+++ b/img/triangle-US-News.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -454 -494 )">
+    <path d="M 462 502  L 454 494  L 454 502  L 462 502  Z " fill-rule="nonzero" fill="#175ea6" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/js/base.js b/js/base.js
index a60e66d..08ea67e 100644
--- a/js/base.js
+++ b/js/base.js
@@ -4,12 +4,12 @@ const base = {
     <div class="base flexcenter">
     <div class="left flexacenter">
         <div class="text flex1">搜索项目</div>
-        <img class="img" src="{~}/img/search-black-icon.svg" />
+        <img class="img" src="/img/search-black-icon.svg" />
     </div>
     <div class="rigth flexacenter">
-        <img class="img" src="{~}/img/contrast-icon.png" />
+        <img class="img" src="/img/contrast-icon.png" />
         <div class="text">项目对比</div>
-        <div class="number">16</div>
+        <div class="number">{{ count }}</div>
     </div>
     </div>`,
     data() {
@@ -17,6 +17,7 @@ const base = {
             hideIcon: false,
             top: 0,
             left: 0,
+            count:0,
         }
     },
     methods: {
@@ -24,7 +25,9 @@ const base = {
             console.log("Custom method called")
         },
         // 计算按钮位置
-        calculate(random) {
+        calculate(random, count) {
+            this.count = count
+
             const dom = document.querySelector(".add" + random)
             const rect = dom.getBoundingClientRect()
             const top = rect.top + rect.height / 2 - 5