xiugai

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
     "element-plus": "^2.7.2",

src/views/index.vue

@@ -23,7 +23,7 @@
             </div>
         </div>
         <div class="main-img">
-            <el-carousel height="8.5625rem">
+            <el-carousel height="8.5625rem" :pause-on-hover="false">
                 <el-carousel-item v-for="item in imgList" :key="item">
                     <img :src="$baseUrl+item.path" alt="">
                 </el-carousel-item>

src/views/pages/article.vue

@@ -37,7 +37,6 @@ export default {
   font-size: .25rem;
   color: #505050;
   line-height: .6rem;
-  min-height: 800px;
   img{
     width: 100%;
     height: auto;
@@ -57,9 +56,10 @@ export default {
     text-align: center;
   }
   .back{
-    position: fixed;
+    display: flex;
-    bottom: 3.75rem;
+    justify-content: center;
-    right: 1.25rem;
+    transform: rotate(90deg);
+    margin-bottom: 1rem;
     img{
       width: 1.25rem;
       height: auto;

src/views/pages/home.vue

@@ -67,18 +67,18 @@
                 <div class="list">
                     <div class="left">
                         <div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
-                            <span class="title" v-if="item.tittle.length<=25">{{item.tittle}}</span>
+                            <span class="title" v-if="item.tittle.length<=35">{{item.tittle}}</span>
-                            <span class="title" v-else>{{item.tittle.slice(0,25)}}...</span>
+                            <span class="title" v-else>{{item.tittle.slice(0,35)}}...</span>
                             <span class="time">{{item.submitTime}}</span>
                         </div>
                     </div>
-                    <div class="right">
+                    <!-- <div class="right">
                         <div class="item" v-for="(item,i) in information.slice(0,2)" @click="jumpToArticle(item.id)">
                             <img :src="$baseUrl+item.img" alt="">
                             <div class="title" v-if="item.tittle.length>20">{{item.tittle.slice(0,20)}}...</div>
                             <div class="title" v-else>{{item.tittle}}</div>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
@@ -211,6 +211,7 @@
                         color: #333333;
                         line-height: .6rem;
                         font-family: Source Han Sans CN;
+                        text-indent: 2em;
                     }
                     .menu{
                         display: flex;
@@ -256,7 +257,6 @@
                     margin-bottom: .55rem;
                     position: relative;
                     cursor: pointer;
-                   
                     img{
                         width: 100%;
                         height: 100%;
@@ -271,8 +271,8 @@
                         color: #FFFFFF;
                         line-height: .55rem;
                         font-family: Source Han Sans CN;
-
                     }
+                    
 
                 }
             }
@@ -303,12 +303,12 @@
                 }
             }
             .list{
-                margin: 0 2.375rem;
+                margin: 0 3.375rem;
                 margin-bottom: 1rem;
                 display: flex;
                 justify-content: space-between;
                 .left{
-                    width: 8.25rem;
+                    width: 100%;
                     .item{
                         width: 100%;
                         height: .75rem;
@@ -319,12 +319,26 @@
                         color: #282828;
                         border-bottom: .0125rem solid #DADADA;
                         cursor: pointer;
+                        position: relative;
+                        &::before{
+                            position: absolute;
+                            content: '';
+                            width: .125rem;
+                            height: .125rem;
+                            border-radius: 50%;
+                            background-color: #e93535;
+                            left: .0625rem;
+                        }
                         &:hover{
                             color: #189eef;
                         }
                         &:last-child{
                             border: none;
                         }
+                        .title{
+                            font-size: .25rem;
+                            margin-left: .375rem;
+                        }
                         .time{
                             color: #666666;
                             font-size: .23rem;

src/views/pages/honor.vue

@@ -1,22 +1,32 @@
 <template>
     <div class="page">
         <div class="list">
-            <div class="item" v-for="(item,i) in certificate">
+            <div class="item" v-for="(item,i) in certificate" @click="showImg(item)">
-                <img :src="$baseUrl+item.img" alt="">
+                <img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
                 <div class="title">{{item.tittle}}</div>
             </div>
         </div>
+        <div class="preview" v-if="bigImgShow">
+            <img id="bigImg" :src="bigImg" alt="">
+            <el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false">
+                <CircleClose />
+            </el-icon>
+        </div>
     </div>
   </template>
   
   <script>
+    import { CircleClose } from '@element-plus/icons-vue';
   export default {
       name: 'Bottom',
       components: {
+        CircleClose
       },
       data(){
           return{
-            certificate:[]
+            certificate:[],
+            bigImgShow: false,
+            bigImg:''
           }
       },
       created(){
@@ -29,7 +39,43 @@
                 this.certificate = res.data.rows
             })
         },
-         
+        showImg(item){
+            this.bigImgShow = true
+            this.$nextTick(()=>{
+                const element = document.getElementById('bigImg');
+                this.hidePic(element,this.$baseUrl+item.img)
+
+
+            })
+        },
+        // 防止盗图
+        getUrl(id,url){
+            this.$nextTick(()=>{
+                const eleAppend = document.getElementById(id);
+                this.hidePic(eleAppend,url)
+            })
+
+        },
+        hidePic(element,url){
+            window.URL = window.URL || window.webkitURL
+            console.log(element)
+            if(typeof history.pushState === 'function'){
+                var xhr = new XMLHttpRequest()
+                xhr.open('get', url, true)
+                xhr.responseType = 'blob'
+                xhr.onload = function () {
+                    if (this.status === 200) {
+                        var blob = this.response
+                        element.onload = function (e) {
+                            window.URL.revokeObjectURL(element.src)
+                        }
+                        element.src = window.URL.createObjectURL(blob)
+                    }
+                }
+                xhr.send()
+            }
+        },
+        
       }
   }
   </script>
@@ -59,6 +105,27 @@
                 }
             }
         }
+        .preview{
+            position: fixed;
+            z-index: 999;
+            top: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: rgba(0, 0, 0, .5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img{
+                width: auto;
+                height: 80vh;
+                
+            }
+            .el-icon{
+                position: absolute;
+                top: .5rem;
+                right: .8rem;
+            }
+        }
         
     }
           

src/views/pages/introduce.vue

@@ -194,10 +194,11 @@
             .lianxi{
                 width: 100%;
                 height: 2.5rem;
-                background-color: #ccc;
                 display: flex;
                 align-items: center;
                 padding-left: 1.625rem;
+                background: url('@/assets/images/lx-bg.jpg') no-repeat;
+                background-size: 100% 100%;
                 .phone,.address{
                     display: flex;
                     margin-left: .75rem;
@@ -226,6 +227,7 @@
                     line-height: .575rem;
                     color: #fff;
                     padding-left: .375rem;
+                    font-size: .25rem;
                 }
                
 

src/views/pages/recruit.vue

@@ -3,7 +3,7 @@
         <div class="list">
             <div class="item" v-for="item in data">
                <div class="title">
-                    <span class="position">电气工程师 </span>
+                    <span class="position">{{item.tittle}}</span>
                </div>
                <div class="content">
                     <div class="left">