.

src/main/zhi-rong-web/src/components/page/SortList.vue

@@ -122,6 +122,7 @@ import DatePicker from '../DatePicker';
 import pageableTable from '../../mixins/pageableTable';
 import areaList from '../../utils/area';
 import dayjs from 'dayjs';
+import menu from '../../mixins/menu';
 export default {
     name: 'List',
     props: {
@@ -188,7 +189,7 @@ export default {
             }
         }
     },
-    mixins: [pageableTable],
+    mixins: [pageableTable, menu],
     data() {
         return {
             search: '',
@@ -201,6 +202,7 @@ export default {
     watch: {
         $route() {
             this.$emit('init');
+            this.scrollTo();
         }
     },
     mounted() {
@@ -267,7 +269,7 @@ export default {
             return _class;
         },
         clickSort(key) {
-            // console.log(key);
+            this.scrollTo(true);
             let index = -1;
             if (this.sort[key]) {
                 index = this.sortList.indexOf(this.sort[key]);

src/main/zhi-rong-web/src/views/About.vue

@@ -37,7 +37,7 @@
                     <template #prim>发展历程</template>
                     <template #sub>Development process</template>
                 </divider-title>
-                <swiper ref="imgSwiper" class="content" :options="imgOptions">
+                <!-- <swiper ref="imgSwiper" class="content" :options="imgOptions">
                     <swiper-slide v-for="(item, index) in historys" :key="index" class="content_con">
                         <img :src="item.img" alt="" class="content_con_img" />
                         <div class="content_con_title">
@@ -61,8 +61,8 @@
                         </div>
                         <img :src="index === actives ? select : unchecked" alt="" class="content_subscript_con_img" />
                     </div>
-                </div>
-                <!-- <div class="history_con_content">
+                </div> -->
+                <div class="history_con_content">
                     <swiper ref="imgSwiper" class="history_con_content_left" :options="imgOptions">
                         <swiper-slide
                             v-for="(item, index) in historys"
@@ -72,21 +72,35 @@
                             <img :src="item.img" alt="" class="history_con_content_left_img" />
                         </swiper-slide>
                     </swiper>
-                    <swiper class="timeLine" ref="timeSwiper" :options="boxOptions">
-                        <swiper-slide v-for="(item, index) in historys" :key="index">
-                            <div class="time-item">
-                                <div class="text1">
-                                    <span>{{ formatTime(item.time, 'YYYY') }}</span>
-                                    <span>年</span>
-                                    <span>{{ formatTime(item.time, 'MM月') }}</span>
+                    <div class="history_con_content_right" @mouseenter="mousemoveEve" @mouseout="mouseoutEve">
+                        <swiper class="timeLine" ref="timeSwiper" :options="boxOptions">
+                            <swiper-slide v-for="(item, index) in historys" :key="index">
+                                <div class="time-item">
+                                    <div :class="index == actives ? 'textxuanzhong' : 'text1'">
+                                        <img
+                                            src="../assets/yixuanzhongfazhan@3x.png"
+                                            alt=""
+                                            class="text1_img"
+                                            v-if="index == actives"
+                                        />
+                                        <img
+                                            src="../assets/weixuanzhongfazhan@3x.png"
+                                            alt=""
+                                            class="text1_img"
+                                            v-else
+                                        />
+                                        <span>{{ formatTime(item.time, 'YYYY') }}</span>
+                                        <span>年</span>
+                                        <span>{{ formatTime(item.time, 'MM月') }}</span>
+                                    </div>
+                                    <div class="text2" v-html="item.title"></div>
                                 </div>
-                                <div class="text2" v-html="item.title"></div>
-                            </div>
-                        </swiper-slide>
-                        <div class="time-pagination" slot="pagination"></div>
-                    </swiper>
-                    <div class="history_con_content_right">
-                        <swiper class="history_con_content_right_con" ref="timeSwiper" :options="honorOption">
+                            </swiper-slide>
+                            <div class="time-pagination" slot="pagination"></div>
+                        </swiper>
+                    </div>
+                    <!-- <div class="history_con_content_right">
+                        <swiper class="history_con_content_right_con" ref="timeSwiper" :options="boxOptions">
                             <swiper-slide v-for="(item, index) in historys" :key="index">
                                 <div class="history_con_content_right_con_top">
                                     <img
@@ -104,8 +118,8 @@
                             </swiper-slide>
                             <div class="time-pagination" slot="pagination"></div>
                         </swiper>
-                    </div>
-                </div> -->
+                    </div> -->
+                </div>
                 <!-- <div class="content_subscript">
                     <div class="content_subscript_con" v-for="(item, index) in historys" :key="index">
                         <div
@@ -226,19 +240,10 @@ export default {
             boxOptions: {
                 direction: 'vertical',
                 slidesPerView: 'auto',
-                centeredSlides: true,
+                slidesOffsetAfter: 220,
                 pagination: {
                     type: 'progressbar',
                     el: '.time-pagination'
-                },
-                mousewheel: true,
-                releaseOnEdges: true,
-                autoplay: {
-                    autoplay: false,
-                    delay: 5000,
-                    stopOnLastSlide: false,
-                    disableOnInteraction: false,
-                    pauseOnMouseEnter: true
                 }
             },
             imgOptions: {
@@ -253,7 +258,7 @@ export default {
                     disableOnInteraction: false
                 },
                 on: {
-                    transitionEnd: swiper => {
+                    slideChange: swiper => {
                         this.actives = this.imgSwiper.activeIndex;
                     }
                 }
@@ -300,9 +305,6 @@ export default {
         };
     },
     computed: {
-        page() {
-            return this.$refs['imgSwiper'].swiper;
-        },
         imgSwiper() {
             return this.$refs.imgSwiper.$swiper;
         },
@@ -335,13 +337,13 @@ export default {
             .then(res => {
                 this.historys = JSON.parse(res.value);
                 this.$nextTick(() => {
-                    this.imgSwiper.init();
+                    this.imgSwiper.update();
                     this.timeSwiper.update();
                     this.imgSwiper.controller.control = this.timeSwiper;
-                    this.timeSwiper.controller.control = this.imgSwiper;
-                    if (!this.timeSwiper.autoplay.running) {
-                        this.timeSwiper.autoplay.start();
-                    }
+                    // this.timeSwiper.controller.control = this.imgSwiper;
+                    // if (!this.timeSwiper.autoplay.running) {
+                    //     this.timeSwiper.autoplay.start();
+                    // }
                     // setTimeout(() => {
                     //     this.imgSwiper.updateSize();
                     // }, 500);
@@ -405,16 +407,6 @@ export default {
                 });
             }
         },
-        touchStart() {
-            if (this.timeSwiper.autoplay.running) {
-                this.timeSwiper.autoplay.stop();
-            }
-        },
-        touchEnd() {
-            if (!this.timeSwiper.autoplay.running) {
-                this.timeSwiper.autoplay.start();
-            }
-        },
         slideChange() {
             this.$nextTick(() => {
                 this.active = this.imgSwiper.activeIndex;
@@ -434,6 +426,12 @@ export default {
                     ''
                 );
             }, 2000);
+        },
+        mousemoveEve() {
+            this.imgSwiper.autoplay.stop();
+        },
+        mouseoutEve() {
+            this.imgSwiper.autoplay.start();
         }
     }
 };
@@ -510,7 +508,7 @@ export default {
             .intro_con_right_one {
                 width: 189px;
                 height: 20px;
-                background: #405CFF;
+                background: #405cff;
                 opacity: 0.6;
                 position: absolute;
                 right: -20px;
@@ -519,7 +517,7 @@ export default {
             .intro_con_right_two {
                 width: 20px;
                 height: 169px;
-                background: #405CFF;
+                background: #405cff;
                 opacity: 0.6;
                 position: absolute;
                 right: -20px;
@@ -565,8 +563,12 @@ export default {
             .content_con_title {
                 flex-grow: 1;
                 background: #ffffff;
-                box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.06);
+                box-shadow: 0px 0px 6px 0px #d2dbf0;
                 padding: 60px 40px 0px;
+                box-sizing: border-box;
+                margin-left: 4px;
+                margin-top: 1px;
+                margin-right: 1px;
                 .content_con_title_one {
                     font-size: 18px;
                     font-family: PingFangSC-Medium, PingFang SC;
@@ -600,6 +602,8 @@ export default {
             background: #ffffff;
             box-shadow: 0px 0px 6px 0px #d2dbf0;
             overflow-y: auto;
+            padding: 40px 8px 15px 30px;
+            box-sizing: border-box;
             .history_con_content_right_con {
                 width: 100%;
                 padding: 40px 60px 22px 40px;
@@ -624,6 +628,170 @@ export default {
                     }
                 }
             }
+            .timeLine {
+                width: 100%;
+                height: 100%;
+                padding-left: 10px;
+                box-sizing: border-box;
+                // background-color: fade(@warn, 70%);
+                // position: absolute;
+                // right: calc(50% - 100px);
+                // bottom: 90px;
+
+                /deep/ .swiper-slide {
+                    height: auto;
+                    padding: 10px 0 20px;
+                }
+
+                .time-item {
+                    font-size: 14px;
+                    color: #ffffff;
+                    line-height: 24px;
+                    padding-left: 30px;
+                    position: relative;
+                    .text1 {
+                        position: relative;
+                        margin-bottom: 10px;
+                        span {
+                            vertical-align: middle;
+                            font-size: 18px;
+                            color: #939599;
+                            line-height: 24px;
+                            font-weight: bold;
+                            // &:first-child {
+                            //     font-family: Impact;
+                            //     color: #ffffff;
+                            //     line-height: 30px;
+                            // }
+
+                            // &:nth-child(2) {
+                            //     font-size: 18px;
+                            //     font-weight: bold;
+                            //     color: #ffffff;
+                            //     line-height: 30px;
+                            //     margin-right: 6px;
+                            // }
+                        }
+                        .text1_img {
+                            width: 22px;
+                            height: 22px;
+                            position: absolute;
+                            left: -35px;
+                            top: 1px;
+                        }
+                        // &::before {
+                        //     content: '';
+                        //     width: 11px;
+                        //     height: 11px;
+                        //     background: #ffffff;
+                        //     position: absolute;
+
+                        //     position: absolute;
+                        //     left: -29px;
+                        //     top: 11px;
+                        //     border-radius: 100%;
+                        // }
+                    }
+                    .textxuanzhong {
+                        position: relative;
+                        margin-bottom: 10px;
+                        span {
+                            vertical-align: middle;
+                            font-size: 18px;
+                            color: #405cff;
+                            line-height: 24px;
+                            font-weight: bold;
+                            // &:first-child {
+                            //     font-family: Impact;
+                            //     color: #ffffff;
+                            //     line-height: 30px;
+                            // }
+
+                            // &:nth-child(2) {
+                            //     font-size: 18px;
+                            //     font-weight: bold;
+                            //     color: #ffffff;
+                            //     line-height: 30px;
+                            //     margin-right: 6px;
+                            // }
+                        }
+                        .text1_img {
+                            width: 22px;
+                            height: 22px;
+                            position: absolute;
+                            left: -35px;
+                            top: 1px;
+                        }
+                        // &::before {
+                        //     content: '';
+                        //     width: 11px;
+                        //     height: 11px;
+                        //     background: #ffffff;
+                        //     position: absolute;
+
+                        //     position: absolute;
+                        //     left: -29px;
+                        //     top: 11px;
+                        //     border-radius: 100%;
+                        // }
+                    }
+                    .text2 {
+                        font-size: 14px;
+                        color: #313233;
+                        line-height: 24px;
+                    }
+                    // &::before {
+                    //     content: '';
+                    //     width: 15px;
+                    //     height: 15px;
+                    //     border: 1px solid #ffffff;
+                    //     position: absolute;
+                    //     left: -2px;
+                    //     top: 8px;
+                    //     border-radius: 100%;
+                    // }
+
+                    &::after {
+                        content: '';
+                        width: 0px;
+                        height: 110%;
+                        border-left: 1px solid #ececed;
+                        position: absolute;
+                        left: 6px;
+                        top: 28px;
+                    }
+                }
+
+                /deep/ .swiper-slide {
+                    &:last-child {
+                        .time-item {
+                            &::after {
+                                content: none;
+                            }
+                        }
+                    }
+                }
+
+                /deep/ .swiper-pagination-progressbar {
+                    left: auto;
+                    right: 0px;
+                    height: calc(100% + 15px);
+                    top: -15px;
+                    width: 4px;
+                    background: #ececed;
+                    .swiper-pagination-progressbar-fill {
+                        background: #d4d4d5;
+                    }
+                }
+            }
+        }
+    }
+    /deep/ .swiper-slide-active {
+        .text1 {
+            font-size: 18px;
+            font-weight: bold;
+            color: #405cff !important;
+            line-height: 24px;
         }
     }
     // .content {
@@ -935,13 +1103,17 @@ export default {
     width: 940px;
     // padding-bottom: 40px;
     .honor_con {
-        width: 290px;
+        width: 282px;
         height: 250px;
         background: #ffffff;
         box-shadow: 0px 0px 6px 0px #d2dbf0;
         padding: 10px;
         padding-bottom: 0px;
         box-sizing: border-box;
+        margin-top: 3px;
+        margin-right: 1px;
+        margin-bottom: 3px;
+        margin-left: 3px;
     }
     img {
         width: 100%;
@@ -1109,105 +1281,6 @@ export default {
 //             }
 //         }
 //     }
-
-//     .timeLine {
-//         width: 340px;
-//         height: 50%;
-//         padding: 20px;
-//         box-sizing: border-box;
-//         background-color: fade(@warn, 70%);
-//         position: absolute;
-//         right: calc(50% - 100px);
-//         bottom: 90px;
-
-//         /deep/ .swiper-slide {
-//             height: auto;
-//             padding: 10px 0 20px;
-//         }
-
-//         .time-item {
-//             font-size: 14px;
-//             color: #ffffff;
-//             line-height: 24px;
-//             padding-left: 30px;
-//             position: relative;
-//             .text1 {
-//                 position: relative;
-//                 span {
-//                     vertical-align: middle;
-//                     &:first-child {
-//                         font-family: Impact;
-//                         color: #ffffff;
-//                         line-height: 30px;
-//                     }
-
-//                     &:nth-child(2) {
-//                         font-size: 18px;
-//                         font-weight: bold;
-//                         color: #ffffff;
-//                         line-height: 30px;
-//                         margin-right: 6px;
-//                     }
-//                 }
-
-//                 &::before {
-//                     content: '';
-//                     width: 11px;
-//                     height: 11px;
-//                     background: #ffffff;
-//                     position: absolute;
-
-//                     position: absolute;
-//                     left: -29px;
-//                     top: 11px;
-//                     border-radius: 100%;
-//                 }
-//             }
-
-//             &::before {
-//                 content: '';
-//                 width: 15px;
-//                 height: 15px;
-//                 border: 1px solid #ffffff;
-//                 position: absolute;
-//                 left: -2px;
-//                 top: 8px;
-//                 border-radius: 100%;
-//             }
-
-//             &::after {
-//                 content: '';
-//                 width: 0px;
-//                 height: 110%;
-//                 border-left: 1px dashed #fff;
-//                 position: absolute;
-//                 left: 6px;
-//                 top: 28px;
-//             }
-//         }
-
-//         /deep/ .swiper-slide {
-//             &:last-child {
-//                 .time-item {
-//                     &::after {
-//                         content: none;
-//                     }
-//                 }
-//             }
-//         }
-
-//         /deep/ .swiper-pagination-progressbar {
-//             left: auto;
-//             right: 20px;
-//             height: calc(100% - 60px);
-//             top: 30px;
-//             width: 2px;
-//             .swiper-pagination-progressbar-fill {
-//                 background-color: #fff;
-//             }
-//         }
-//     }
-// }
 .center-content_five {
     width: 100%;
     background: #ffffff;
@@ -1260,3 +1333,4 @@ export default {
     }
 }
 </style>
+

src/main/zhi-rong-web/src/views/Home.vue

@@ -283,7 +283,7 @@
                                                     专利权人： {{ i.owner }}
                                                 </div>
                                             </div>
-                                            <div class="intellectual_property_one_left_own">
+                                            <div class="intellectual_property_one_left_own" v-if="i.inventor">
                                                 发明人：&nbsp;{{ i.inventor.join(';') }}
                                             </div>
                                         </div>