v2最新版

package-lock.json

@@ -4768,6 +4768,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -15303,6 +15311,11 @@
         }
       }
     },
+    "social-share.js": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/social-share.js/-/social-share.js-1.0.16.tgz",
+      "integrity": "sha512-NSV6fYFft/U0fEbjXdumZGU3c2oTbnJ6Ha5eNMEEBGsJpD+nu+nbg3LiRygO5GnoNgUa/dOmJyVHb/kM4dJa6g=="
+    },
     "sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz",
@@ -15521,6 +15534,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-6.0.2.tgz",
@@ -15777,6 +15795,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmmirror.com/table/-/table-5.4.6.tgz",
@@ -16617,6 +16644,11 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -16644,6 +16676,11 @@
         }
       }
     },
+    "vue-github-badge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-github-badge/-/vue-github-badge-1.0.1.tgz",
+      "integrity": "sha512-8X+FUWapnnDfs6cRUg3mCfHUf2r5arUfCSRdvbIn860oj9us3Rz3VOtioUgmfzh6EhaaYTs0Oh78EzJ+Z6uqAA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -16765,6 +16802,15 @@
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
       "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
     },
+    "vue-social-share": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/vue-social-share/-/vue-social-share-0.0.3.tgz",
+      "integrity": "sha512-zzZGloWVTE/OrEFT0oVfVxzWBvak9KLWiIRWWkPWag10PlGgxTI4o1oN+kXIT+8U3MkRVA8cQLPf5CPqDGmfqw==",
+      "requires": {
+        "social-share.js": "^1.0.16",
+        "vue-github-badge": "^1.0.0"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -12,11 +12,14 @@
     "axios": "0.21.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.13",
+    "nprogress": "^0.2.0",
     "quill": "1.3.7",
     "quill-image-resize-module": "^3.0.0",
-    "nprogress": "^0.2.0",
+    "swiper": "^5.2.0",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0",
+    "vue-social-share": "0.0.3",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/api/XfWebApi.js

@@ -136,4 +136,13 @@ export default {
             noToken: true
         })
     },
+    //获取最新几条新闻
+    XfWebApiGetNewsReList(data) {
+        return request({
+            url: '/api/XfWebApi/GetNewsReList',
+            method: 'get',
+            params: data,
+            noToken: true
+        })
+    },
 }

src/assets/css/client.css

@@ -0,0 +1,101 @@
+
+@font-face{font-family:"socialshare";src:url(./static/iconfont.eot);src:url(./static/iconfont.eot?#iefix) format("embedded-opentype"),url(./static/iconfont.woff) format("woff"),url(./static/iconfont.ttf) format("truetype"),url(./static/iconfont.svg#iconfont) format("svg")
+}
+.social-share{font-family:"socialshare" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale
+}
+.social-share *{font-family:"socialshare" !important
+}
+.social-share .icon-tencent:before{content:"\F07A"
+}
+.social-share .icon-qq:before{content:"\F11A"
+}
+.social-share .icon-weibo:before{content:"\F12A"
+}
+.social-share .icon-wechat:before{content:"\F09A"
+}
+.social-share .icon-douban:before{content:"\F10A"
+}
+.social-share .icon-heart:before{content:"\F20A"
+}
+.social-share .icon-like:before{content:"\F00A"
+}
+.social-share .icon-qzone:before{content:"\F08A"
+}
+.social-share .icon-linkedin:before{content:"\F01A"
+}
+.social-share .icon-diandian:before{content:"\F05A"
+}
+.social-share .icon-facebook:before{content:"\F03A"
+}
+.social-share .icon-google:before{content:"\F04A"
+}
+.social-share .icon-twitter:before{content:"\F06A"
+}
+.social-share a{position:relative;text-decoration:none;margin:4px;display:inline-block;outline:none
+}
+.social-share .social-share-icon{position:relative;display:inline-block;width:32px;height:32px;font-size:20px;border-radius:50%;line-height:32px;border:1px solid #666;color:#666;text-align:center;vertical-align:middle;transition:background 0.6s ease-out 0s
+}
+.social-share .social-share-icon:hover{background:#666;color:#fff
+}
+.social-share .icon-weibo{color:#ff763b;border-color:#ff763b
+}
+.social-share .icon-weibo:hover{background:#ff763b
+}
+.social-share .icon-tencent{color:#56b6e7;border-color:#56b6e7
+}
+.social-share .icon-tencent:hover{background:#56b6e7
+}
+.social-share .icon-qq{color:#56b6e7;border-color:#56b6e7
+}
+.social-share .icon-qq:hover{background:#56b6e7
+}
+.social-share .icon-qzone{color:#FDBE3D;border-color:#FDBE3D
+}
+.social-share .icon-qzone:hover{background:#FDBE3D
+}
+.social-share .icon-douban{color:#33b045;border-color:#33b045
+}
+.social-share .icon-douban:hover{background:#33b045
+}
+.social-share .icon-linkedin{color:#0077B5;border-color:#0077B5
+}
+.social-share .icon-linkedin:hover{background:#0077B5
+}
+.social-share .icon-facebook{color:#44619D;border-color:#44619D
+}
+.social-share .icon-facebook:hover{background:#44619D
+}
+.social-share .icon-google{color:#db4437;border-color:#db4437
+}
+.social-share .icon-google:hover{background:#db4437
+}
+.social-share .icon-twitter{color:#55acee;border-color:#55acee
+}
+.social-share .icon-twitter:hover{background:#55acee
+}
+.social-share .icon-diandian{color:#307DCA;border-color:#307DCA
+}
+.social-share .icon-diandian:hover{background:#307DCA
+}
+.social-share .icon-wechat{position:relative;color:#7bc549;border-color:#7bc549
+}
+.social-share .icon-wechat:hover{background:#7bc549
+}
+.social-share .icon-wechat .wechat-qrcode{display:none;border:1px solid #eee;position:absolute;z-index:9;top:-205px;left:-84px;width:200px;height:192px;color:#666;font-size:12px;text-align:center;background-color:#fff;box-shadow:0 2px 10px #aaa;transition:all 200ms;-webkit-tansition:all 350ms;-moz-transition:all 350ms
+}
+.social-share .icon-wechat .wechat-qrcode.bottom{top:40px;left:-84px
+}
+.social-share .icon-wechat .wechat-qrcode.bottom:after{display:none
+}
+.social-share .icon-wechat .wechat-qrcode h4{font-weight:normal;height:26px;line-height:26px;font-size:12px;background-color:#f3f3f3;margin:0;padding:0;color:#777
+}
+.social-share .icon-wechat .wechat-qrcode .qrcode{width:105px;margin:10px auto
+}
+.social-share .icon-wechat .wechat-qrcode .qrcode table{margin:0 !important
+}
+.social-share .icon-wechat .wechat-qrcode .help p{font-weight:normal;line-height:16px;padding:0;margin:0
+}
+.social-share .icon-wechat .wechat-qrcode:after{content:'';position:absolute;left:50%;margin-left:-6px;bottom:-13px;width:0;height:0;border-width:8px 6px 6px 6px;border-style:solid;border-color:#fff transparent transparent transparent
+}
+.social-share .icon-wechat:hover .wechat-qrcode{display:block
+}

src/assets/css/static/iconfont.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Sat Nov 28 22:48:50 2015
+ By Ads
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face 
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="2 0 6 3 0 0 0 0 0 0"
+    ascent="896"
+    descent="-128"
+    x-height="792"
+    bbox="-0.097561 -77 1024.92 839"
+    underline-thickness="50"
+    underline-position="-100"
+    unicode-range="U+0078-F20A"
+  />
+<missing-glyph horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
+ />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    <glyph glyph-name="uniF00A" unicode="&#xf00a;" 
+d="M911 512l-334 1q19 79 23 116q4 45 -3 76q-11 47 -34 90q-6 12 -17 18.5t-24 6.5h-65q-13 0 -23.5 -6.5t-17 -17t-6.5 -23.5v-35v-32v-26q0 -10 -1 -11q-12 -26 -26.5 -52t-29.5 -51.5t-32 -49.5q-6 -9 -11.5 -17t-11.5 -16t-12.5 -16t-13.5 -15q-13 -14 -13 -32v-411
+q0 -19 13 -33q28 -28 73 -28q323 1 440 1q13 0 24 6t17 17l119 203q6 11 9 22.5t3 23.5l1 244q0 13 -6.5 24t-17 17t-23.5 6zM155 445h-42q-13 0 -24 -6t-17 -17t-6 -24v-403q0 -19 13.5 -33t33.5 -14h42q13 0 23.5 6.5t17 17t6.5 23.5v403q0 20 -14 33.5t-33 13.5z" />
+    <glyph glyph-name="uniF01A" unicode="&#xf01a;" 
+d="M260 740q0 -41 -29.5 -69.5t-76.5 -28.5q-45 0 -74 28.5t-29 69.5q0 43 29 71t76 28t74.5 -28t29.5 -71zM57 -69v633h197v-633h-197zM371 361q0 89 -4 203h170l10 -88h4q61 103 194 103q103 0 165.5 -69t62.5 -204v-375h-197v351q0 137 -100 137q-72 0 -101 -74
+q-6 -12 -6 -49v-365h-198v430z" />
+    <glyph glyph-name="uniF03A" unicode="&#xf03a;" 
+d="M751 815v-142h-84q-46 0 -62 -19t-16 -58v-101h157l-21 -158h-136v-407h-164v407h-136v158h136v117q0 100 56 154.5t148 54.5q79 0 122 -6z" />
+    <glyph glyph-name="uniF04A" unicode="&#xf04a;" 
+d="M629 830h-245q-37 0 -69 -4t-71.5 -19t-71.5 -41q-37 -31 -56.5 -72.5t-19.5 -82.5q0 -46 22.5 -87t68.5 -68t106 -27h7h8q2 0 7.5 0.5t7.5 1t8 0.5q-1 -1 -2 -4t-1.5 -4t-1.5 -4l-2 -5q0 -1 -1 -3.5t-1.5 -4.5t-1 -4.5t-0.5 -5t-0.5 -5t-0.5 -5.5q0 -17 6.5 -33
+t11.5 -23t18 -23q-18 -1 -26.5 -1.5t-29 -2.5t-33.5 -4.5t-34 -6.5t-36.5 -9t-34 -12.5t-33.5 -16.5q-48 -28 -69.5 -66.5t-21.5 -75.5q0 -69 66.5 -117.5t188.5 -48.5q74 0 134.5 19t98.5 50.5t58.5 70t20.5 80.5q0 19 -3.5 36t-11.5 32t-15 26.5t-21 24.5t-23 21t-26 22
+l-43 32q-9 8 -14 12.5t-10.5 15.5t-5.5 22.5t6 23t11 17t16 16.5q24 18 37.5 30.5t30 33t24 45.5t7.5 56t-8.5 57.5t-24 46.5t-25.5 30t-26 22h74zM524 120q0 -36 -19.5 -64t-59.5 -44.5t-95 -16.5q-94 0 -151.5 39.5t-57.5 102.5q0 83 102 119q57 19 125 19h6h4
+q3 0 4.5 -0.5t3.5 -0.5h5q2 0 4 -1q75 -51 102 -81t27 -72zM429 494q-33 -33 -80 -33q-36 0 -66 21t-47 53.5t-26 67t-9 65.5q0 54 26 86q14 17 36.5 27.5t46.5 10.5q46 0 81.5 -37t51.5 -84.5t16 -92.5v-10q0 -4 -1 -10.5t-2 -12.5t-3.5 -13t-5.5 -13.5t-7.5 -13
+t-10.5 -11.5zM865 653v118h-59v-118h-119v-58h119v-118h59v118h118v58h-118z" />
+    <glyph glyph-name="uniF05A" unicode="&#xf05a;" 
+d="M540 185h370v370h-369l-1 85h285v114h-285v85h-142v-284h-256v-370h199v-258zM284 279v175h484v-175h-484zM853 100q-17 0 -33 -6.5t-27.5 -18t-18 -27.5t-6.5 -33.5t6.5 -33.5t18 -27.5t27.5 -18.5t33 -7q35 0 60 25.5t25 61t-25 60.5t-60 25zM597.5 100
+q-35.5 0 -60.5 -25t-25 -60.5t25 -61t60.5 -25.5t60 25.5t24.5 61t-24.5 60.5t-60 25zM171 100q-14 0 -27 -4t-23.5 -12t-18.5 -18.5t-12 -24t-4 -27.5q0 -35 24.5 -60.5t60 -25.5t60.5 25.5t25 60.5q0 18 -7 34t-18 27.5t-27 18t-33 6.5z" />
+    <glyph glyph-name="uniF06A" unicode="&#xf06a;" horiz-adv-x="1025" 
+d="M1024 702q-58 -26 -121 -34q33 20 57 50t36 67q-63 -37 -134 -51q-62 66 -153 66q-57 0 -105.5 -28t-76.5 -76.5t-28 -105.5q0 -8 0.5 -16t2 -16t2.5 -16q-129 7 -241.5 65t-191.5 155q-13 -24 -20.5 -51t-7.5 -55q0 -36 11.5 -69t32.5 -60t49 -46q-50 2 -95 26v-2
+q0 -76 48 -134t121 -72q-27 -8 -56 -8q-5 0 -10 1h-10q-5 1 -9.5 1.5t-9.5 1.5q20 -63 74 -103.5t122 -42.5q-36 -28 -77.5 -48t-88 -31t-95.5 -11q-25 0 -50 3q147 -94 322 -94q112 0 210 35.5t168 95t120.5 136.5t75 161.5t24.5 169.5q0 14 -1 27q8 5 15.5 11t14.5 12
+l14 14q7 6 13.5 12.5t13 14t12 14.5t11.5 15t11 16z" />
+    <glyph glyph-name="uniF07A" unicode="&#xf07a;" 
+d="M435 826q-94 -21 -163.5 -85.5t-98.5 -155.5t-8 -186q7 -34 21 -66q4 -9 12.5 -15t18 -7t18.5 3q15 6 20.5 20.5t-0.5 28.5q-11 25 -17 53q-17 74 6 146t78 123t129.5 67.5t145.5 -6.5t121.5 -78.5t67 -130t-6 -146.5t-77.5 -123t-130 -67q-44 -10 -89 -5q-15 1 -27 -9
+t-13.5 -25t8.5 -27.5t25 -13.5q56 -6 112 7q94 20 164 85t98.5 155.5t8 185t-84.5 164.5t-154.5 99t-184.5 9zM542 339q57 13 88 62t18 106q-8 37 -33 64.5t-60.5 39t-72.5 3.5q-57 -13 -88 -62t-19 -106q5 -21 16 -41q-70 -81 -105 -197t-16 -239q2 -16 14.5 -25t28.5 -7
+q1 1 2 1q14 3 22.5 15.5t6.5 26.5q-17 105 12.5 204.5t88.5 168.5q46 -25 97 -14z" />
+    <glyph glyph-name="uniF08A" unicode="&#xf08a;" 
+d="M767 277q-9 -8 -11 -13.5t0 -16.5l4 -24q-183 2 -297 18q-6 2 0 5l289 201q11 7 -1 9q-7 1 -19 3t-21 3l-9 1q-90 11 -190 11q-170 0 -303 -30h8q225 0 374 -23q7 -2 0 -6l-289 -206l-5 -4q-2 -4 5 -5q45 -6 94 -9q59 -4 116 -4q176 0 312 32l5 1q-19 -15 -63 -30
+l42 -226q2 -12 -1.5 -19t-11 -7.5t-18.5 4.5l-241 140q-24 15 -49 -1l-240 -139q-16 -9 -25 -2.5t-5 24.5l53 284q3 9 1.5 14t-8.5 12l-210 193q-9 8 -10.5 16t4.5 13t18 6l268 30q15 2 21 5.5t12 14.5l126 262q9 17 20.5 17t19.5 -17l118 -262q5 -13 11 -17t21 -6l277 -27
+q18 -2 21.5 -12t-9.5 -23z" />
+    <glyph glyph-name="uniF09A" unicode="&#xf09a;" 
+d="M704 547q-87 0 -163 -38t-120 -103q-22 -32 -33.5 -67t-11.5 -73q0 -41 14 -78h-18q-64 0 -124 18l-124 -56l30 102q-64 43 -101 105t-37 134q0 124 104.5 213t251.5 89q128 0 227 -70t122 -176h-17zM218 557q8 -7 17 -10.5t19 -3.5q22 0 36.5 14.5t14.5 35.5q0 11 -4 20
+t-11 16q-2 2 -4 3l-4 4l-4 2l-4 2l-4 2h-6l-4 2h-6q-21 0 -36 -15q-7 -7 -10.5 -16t-3.5 -20q0 -7 1.5 -13.5t5 -12t7.5 -10.5zM1008 266q0 -126 -116 -204l23 -87l-105 49q-50 -16 -106 -16q-124 0 -213 75.5t-89 182.5q0 70 40.5 129t110.5 93q23 11 47.5 18.5t50.5 11.5
+t53 4q126 0 215 -75t89 -181zM526.5 629.5q-14.5 14.5 -35 14.5t-34.5 -15q-7 -7 -11 -16t-4 -19q0 -20 14.5 -34.5t35 -14.5t35.5 14q7 8 10.5 16.5t3.5 18.5q0 21 -14.5 35.5zM603 312q9 0 16.5 3.5t13.5 9.5q13 13 13 29q0 8 -3.5 15.5t-9.5 13.5q-12 13 -30 13
+q-6 0 -11 -1.5t-10 -4.5t-9 -7q-13 -13 -13 -28q0 -12 6 -21.5t16 -15.5q5 -3 10 -4.5t11 -1.5zM775 323q12 -13 30.5 -13t31.5 13q3 3 5 6.5t4 7.5t2.5 8t0.5 8q0 6 -1.5 11t-4 10t-6.5 9q-13 13 -31.5 13t-30.5 -13q-5 -4 -7.5 -9t-4 -10t-1.5 -11q0 -9 3 -16.5t10 -13.5z
+" />
+    <glyph glyph-name="uniF10A" unicode="&#xf10a;" 
+d="M138 773h746v-84h-746v84zM820 273v328h-617v-328h617zM292 517h439v-160h-439v160zM686 83q41 63 76 143l-90 33q-35 -97 -81 -176h-156q-39 103 -88 176l-83 -33q51 -77 83 -143h-230v-83h789v83h-220z" />
+    <glyph glyph-name="uniF11A" unicode="&#xf11a;" 
+d="M911 223q-5 31 -17 61t-25.5 50.5t-26.5 37t-21 24.5l-8 9q5 44 -2.5 73t-17.5 36l-10 8q-2 62 -18.5 112.5t-39.5 81.5t-54 53.5t-57 32.5t-54 15.5t-38.5 6t-17.5 0.5q-6 0 -16.5 -0.5t-39 -6t-54 -15.5t-57 -32.5t-54.5 -53.5t-39.5 -81.5t-17.5 -112.5q-2 -1 -4.5 -3
+t-9.5 -10t-10.5 -20.5t-7 -34t0.5 -49.5l-9 -9q-5 -5 -19.5 -23.5t-26.5 -38t-24.5 -50t-17.5 -61.5q-1 -4 -1 -10t1 -22t3.5 -28t9 -21t15.5 -8t25 17t37 50q23 -62 64 -117q-3 -1 -8 -3.5t-17.5 -10t-21.5 -17t-16 -26t-5 -34.5q0 -2 0.5 -4.5t3 -10t8 -14t17.5 -14.5
+t28 -13.5t42.5 -9t58.5 -2.5q13 1 32.5 4t59.5 17t55 36h30q31 -44 141 -56l6 -1q45 -1 78 5.5t47.5 15.5t23 21.5t9 17.5t0.5 8q2 18 -4.5 34t-16.5 26t-20.5 17.5t-18.5 10.5l-8 3q9 11 17 23.5t14 23.5l12 22q6 11 9.5 19.5t6.5 15t4 9.5l1 4q21 -34 37 -50t25.5 -17
+t15.5 8t8.5 21t3.5 28t1 23v9v0z" />
+    <glyph glyph-name="uniF12A" unicode="&#xf12a;" horiz-adv-x="1026" 
+d="M0 242q0 65 40 140t113 147q96 97 195.5 134.5t140.5 -3.5q36 -36 11 -119q-2 -9 0 -12t5 -4t8 0t8 2l3 1q80 34 141.5 34t87.5 -35q25 -35 0 -101q-1 -8 -3 -11t3 -7.5t7 -5.5t9 -3q33 -10 59.5 -26.5t45 -47t19.5 -66.5q0 -39 -20.5 -79t-62.5 -79t-96 -66.5t-129 -48
+t-155 -17.5t-157.5 19.5t-137 52.5t-98.5 87t-37 114zM104 201q5 -55 51 -97t118.5 -62t156.5 -12q128 13 211 80.5t76 151.5q-5 54 -50 96t-120 62.5t-157 12.5q-127 -13 -211 -80.5t-75 -151.5zM237 151q-24 52 3 106q27 53 86.5 80t120.5 10q63 -16 90.5 -67.5
+t1.5 -109.5t-90.5 -85t-127.5 -7q-62 19 -84 73zM283 166q5 -21 24.5 -30t43 -1t35.5 28q11 18 6 38.5t-25 28.5q-20 9 -42.5 0.5t-33.5 -25.5q-13 -20 -8 -39zM403 247q-10 -19 8 -27q8 -2 16 1t12 10q6 8 2.5 16t-10.5 10q-7 3 -16 0t-12 -10zM666 746q-3 16 5 30.5
+t25 16.5q70 14 139.5 -6.5t118.5 -76.5q50 -56 65 -128.5t-8 -137.5q-5 -16 -19.5 -23t-30 -2t-22.5 19.5t-3 29.5q16 47 6 98t-46 90q-36 40 -85 54.5t-98 5.5q-17 -3 -30 6t-17 24zM699 616q-3 15 5.5 26t20.5 14q35 8 68.5 -2.5t57.5 -37t31 -62.5t-3 -68
+q-5 -12 -17.5 -19t-25.5 -2t-20 17.5t-2 25.5q11 36 -13.5 62.5t-61.5 20.5q-13 -3 -25 4t-15 21z" />
+    <glyph glyph-name="uniF20A" unicode="&#xf20a;" 
+d="M945 677q-23 37 -54.5 64t-68.5 42.5t-79 18.5q-148 7 -228 -101l-1 2q-1 1 -2 1q0 -3 -3 -3q-80 108 -228 101q-60 -3 -113 -36t-89 -89q-26 -41 -36 -89.5t-5 -99t25 -102.5t54 -98q53 -69 89 -110q122 -134 282 -240l21 -15h6l21 15q78 52 150 113t132 127
+q11 13 24 28.5t22.5 28t22 28t20.5 25.5q69 94 79.5 200.5t-41.5 188.5z" />
+  </font>
+</defs></svg>

src/components/login-dialog/index.vue

@@ -4,6 +4,7 @@
       :close-on-click-modal="false"
       title="登录"
       :visible.sync="dialogVisible"
+      append-to-body
       width="500px"
     >
       <el-form

src/components/nav-tab/index.vue

@@ -55,12 +55,12 @@
             </el-submenu>
           </template>
         </el-menu>
-        <div>
+        <!-- <div>
           <el-button size="medium" v-if="$store.state.token" @click="userInfo"
             >个人中心</el-button
           >
           <el-button size="medium" v-else @click="login">登录</el-button>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="backTopBtn" v-if="fix" @click="scollTop">

src/components/suggestion/index.vue

@@ -91,7 +91,7 @@ export default {
             .XfWebApiSavePropose(this.ruleForm)
             .then((res) => {
               this.close();
-              this.$parent.search();
+              this.$message.success("提交成功");
             })
             .finally(() => {
               this.loading = false;
@@ -106,5 +106,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/components/table/index.vue

@@ -34,14 +34,21 @@
                 }}</span>
               </template>
             </div>
+            <el-image
+              v-else-if="item.scope === 'image'"
+              style="width: 100px"
+              :src="$methods.splitImgHost(scope.row[item.prop])"
+              :preview-src-list="[$methods.splitImgHost(scope.row[item.prop])]"
+            >
+            </el-image>
             <el-input-number
               v-else-if="item.scope === 'input'"
-              style="width: 100%;"
+              style="width: 100%"
               :precision="0"
               :min="0"
               :controls="false"
               v-model="scope.row[item.prop]"
-              @change="changeSort($event,scope.row)"
+              @change="changeSort($event, scope.row)"
             ></el-input-number>
             <span v-else-if="item.scope === 'time'">{{
               $methods.onlyFormaHao(scope.row[item.prop])
@@ -105,8 +112,8 @@ export default {
     return {};
   },
   methods: {
-    changeSort(e,item){
-      this.$emit("changeSort",e,item)
+    changeSort(e, item) {
+      this.$emit("changeSort", e, item);
     },
     //多选触发
     selectionChange(e) {

src/components/top-header/index copy.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="header">
+    <!--顶部-->
+    <div class="header-top">
+      <div class="main-cen">
+        <div id="webjx">{{ gettime + " " + week }}</div>
+        <ul class="header-link">
+          <li v-if="!$store.state.token" class="links" @click="joinVip">
+            入会申请
+          </li>
+          <li v-if="!$store.state.token">|</li>
+          <li class="links">关于我们</li>
+          <li>|</li>
+          <li class="links">网站地图</li>
+          <li>|</li>
+          <li class="links" @click="suggestion">网站建议</li>
+          <li v-if="$store.state.token">|</li>
+          <li
+            class="links"
+            v-if="$store.state.token"
+            @click="$store.commit('CLEAR_Token_UserInfo')"
+          >
+            退出
+          </li>
+        </ul>
+        <div style="clear: both"></div>
+      </div>
+    </div>
+    <div class="header-logo">
+      <div class="main-cen">
+        <div class="logo">
+          <a href="/"><img src="@/assets/images/logo.png" /></a>
+        </div>
+        <!-- <div class="header-tel">
+          <p class="con01">
+            办公电话： <span>13711142332<br />13580550376</span>
+          </p>
+          <p class="con02">办公邮箱： <i>gzxfxh@126.com</i></p>
+        </div> -->
+        <div class="hedaer-search">
+          <input
+            type="text"
+            placeholder="请输入关键词搜索"
+            class="sc-text"
+            v-model.trim="searchKey"
+          />
+          <button class="sc-btn" @click="submit">搜索</button>
+        </div>
+        <div style="clear: both"></div>
+      </div>
+    </div>
+    <membership ref="membership"></membership>
+    <suggestion ref="suggestion"></suggestion>
+  </div>
+</template>
+
+<script>
+import membership from "@/components/membership";
+import suggestion from "@/components/suggestion";
+export default {
+  components: { membership,suggestion },
+  data() {
+    return {
+      gettime: "",
+      week: "",
+      searchKey: "",
+    };
+  },
+  created() {
+    if (this.$route.query && this.$route.query.mid && this.$route.query.Newpwd)
+      this.$api
+        .XfWebApiGetMemberApplyRc({
+          mid: this.$route.query.mid,
+          Newpwd: this.$route.query.Newpwd,
+        })
+        .then((res) => {
+          this.$confirm("入会申请已驳回，是否前往重新编辑", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              res.Data.Newpwd = this.$route.query.Newpwd;
+              this.$refs.membership.showInit(res.Data);
+            })
+            .catch(() => {});
+        });
+  },
+  mounted() {
+    this.getTime();
+    setInterval(() => {
+      this.getTime();
+    }, 1000);
+  },
+  methods: {
+    //入会申请
+    joinVip() {
+      this.$refs.membership.showInit();
+    },
+    //网站建议
+    suggestion(){
+      this.$refs.suggestion.showInit()
+    },
+    submit() {
+      if (!this.searchKey) {
+        this.$message.warning("请输入关键词");
+        return;
+      }
+      this.$router.push({
+        path: "searchKey",
+        query: {
+          key: this.searchKey,
+        },
+      });
+      return;
+    },
+    getTime() {
+      var _this = this;
+      let yy = new Date().getFullYear();
+      var mm =
+        new Date().getMonth() > 9
+          ? new Date().getMonth() + 1
+          : new Date().getMonth() == 9
+          ? new Date().getMonth() + 1
+          : "0" + (new Date().getMonth() + 1);
+      var dd =
+        new Date().getDate() < 10
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
+      let hh = new Date().getHours();
+      let mf =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      let ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
+      let wk = new Date().getDay();
+      let weeks = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      this.week = weeks[wk];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  position: relative;
+  z-index: 1;
+}
+.main-cen {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.header-top {
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+}
+#webjx {
+  font-size: 12px;
+  color: #666;
+  float: left;
+}
+.header-link {
+  float: right;
+  & > .links {
+    user-select: none;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.2s;
+    &:hover {
+      color: #c9001f;
+    }
+  }
+}
+.header-link li {
+  float: left;
+  margin-left: 10px;
+  font-size: 12px;
+  color: #aaa;
+}
+.header-logo {
+  background: url("../../assets/images/top-bg.jpg") bottom center repeat;
+  background-size: cover;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.logo {
+  float: left;
+}
+.header-tel {
+  float: right;
+  line-height: 50px;
+  margin-left: 15px;
+  margin-top: -8px;
+}
+.header-tel p {
+  display: flex;
+  color: #00a2eb;
+  font-weight: bold;
+  font-size: 18px;
+}
+.header-tel p span {
+  float: right;
+  color: #00a2eb;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 24px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.header-tel p i {
+  font-size: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.header-tel p.con01 {
+  height: 45px;
+}
+.header-tel p.con02 {
+  height: 40px;
+  line-height: 40px;
+}
+.hedaer-search {
+  float: right;
+  margin-top: 15px;
+}
+.hedaer-search input {
+  border: 1px solid #c9001f;
+  line-height: 42px;
+  height: 42px;
+  padding-left: 15px;
+  color: #888;
+  font-size: 14px;
+  float: left;
+  width: 220px;
+  background: #fff;
+}
+.hedaer-search button {
+  height: 42px;
+  width: 42px;
+  background: url("../../assets/images/sousuo-icon.jpg") center center no-repeat;
+  border: none;
+  text-indent: -9999em;
+  cursor: pointer;
+}
+</style>

src/components/top-header/index.vue

@@ -1,67 +1,70 @@
 <template>
   <div class="header">
-    <!--顶部-->
-    <div class="header-top">
-      <div class="main-cen">
-        <div id="webjx">{{ gettime + " " + week }}</div>
-        <ul class="header-link">
-          <li v-if="!$store.state.token" class="links" @click="joinVip">
-            入会申请
-          </li>
-          <li v-if="!$store.state.token">|</li>
-          <li class="links">关于我们</li>
-          <li>|</li>
-          <li class="links">网站地图</li>
-          <li>|</li>
-          <li class="links" @click="suggestion">网站建议</li>
-          <li v-if="$store.state.token">|</li>
-          <li
+    <div class="main-cen">
+      <div class="dis_just">
+        <div class="left">
+          欢迎您进入广州市建设工程消防协会！
+          <span v-if="$store.state.token"
+            >{{ $store.state.userInfo.Account
+            }}<span
+              style="cursor: pointer; color: red; margin-left: 14px"
+              @click="$store.commit('CLEAR_Token_UserInfo')"
+              >退出</span
+            ></span
+          ><span style="cursor: pointer; color: red" v-else @click="login"
+            >请登录</span
+          ><span v-if="!$store.state.token" style="margin: 0px 10px">|</span
+          ><span
+            style="cursor: pointer; color: red"
+            v-if="!$store.state.token"
             class="links"
-            v-if="$store.state.token"
-            @click="$store.commit('CLEAR_Token_UserInfo')"
+            @click="joinVip"
+            >会员申请</span
           >
-            退出
-          </li>
-        </ul>
-        <div style="clear: both"></div>
-      </div>
-    </div>
-    <div class="header-logo">
-      <div class="main-cen">
-        <div class="logo">
-          <a href="/"><img src="@/assets/images/logo.png" /></a>
         </div>
-        <!-- <div class="header-tel">
-          <p class="con01">
-            办公电话： <span>13711142332<br />13580550376</span>
-          </p>
-          <p class="con02">办公邮箱： <i>gzxfxh@126.com</i></p>
-        </div> -->
-        <div class="hedaer-search">
+        <div class="right">
+          <span v-if="$store.state.token" style="cursor: pointer" @click="userInfo"
+            >会员中心</span
+          ><span v-if="$store.state.token" style="margin: 0px 10px">|</span>
+          <span class="links" @click="suggestion">网站建议</span>
+        </div>
+      </div>
+      <div class="dis_flex">
+        <img
+          @click="$router.replace('/')"
+          src="@/assets/images/logo.png"
+          alt=""
+        />
+        <div class="right">
           <input
+            v-model.trim="searchKey"
+            class="input_x"
             type="text"
             placeholder="请输入关键词搜索"
-            class="sc-text"
-            v-model.trim="searchKey"
           />
-          <button class="sc-btn" @click="submit">搜索</button>
+          <div class="btn" @click="submit">
+            <img src="@/assets/images/icon_search@2x.png" alt="" />
+          </div>
         </div>
-        <div style="clear: both"></div>
       </div>
     </div>
+    <!--顶部-->
     <membership ref="membership"></membership>
     <suggestion ref="suggestion"></suggestion>
+    <login-dialog ref="login"></login-dialog>
+    <user-info ref="userInfo"></user-info>
   </div>
 </template>
 
 <script>
+import loginDialog from "@/components/login-dialog/index.vue";
 import membership from "@/components/membership";
 import suggestion from "@/components/suggestion";
+import userInfo from "@/components/userInfo/index.vue";
 export default {
-  components: { membership,suggestion },
+  components: { loginDialog, membership, suggestion,userInfo },
   data() {
     return {
-      gettime: "",
       week: "",
       searchKey: "",
     };
@@ -86,20 +89,20 @@ export default {
             .catch(() => {});
         });
   },
-  mounted() {
-    this.getTime();
-    setInterval(() => {
-      this.getTime();
-    }, 1000);
-  },
   methods: {
+    userInfo() {
+      this.$refs.userInfo.showInit();
+    },
+    login() {
+      this.$refs.login.showInit();
+    },
     //入会申请
     joinVip() {
       this.$refs.membership.showInit();
     },
     //网站建议
-    suggestion(){
-      this.$refs.suggestion.showInit()
+    suggestion() {
+      this.$refs.suggestion.showInit();
     },
     submit() {
       if (!this.searchKey) {
@@ -114,144 +117,72 @@ export default {
       });
       return;
     },
-    getTime() {
-      var _this = this;
-      let yy = new Date().getFullYear();
-      var mm =
-        new Date().getMonth() > 9
-          ? new Date().getMonth() + 1
-          : new Date().getMonth() == 9
-          ? new Date().getMonth() + 1
-          : "0" + (new Date().getMonth() + 1);
-      var dd =
-        new Date().getDate() < 10
-          ? "0" + new Date().getDate()
-          : new Date().getDate();
-      let hh = new Date().getHours();
-      let mf =
-        new Date().getMinutes() < 10
-          ? "0" + new Date().getMinutes()
-          : new Date().getMinutes();
-      let ss =
-        new Date().getSeconds() < 10
-          ? "0" + new Date().getSeconds()
-          : new Date().getSeconds();
-      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
-      let wk = new Date().getDay();
-      let weeks = [
-        "星期日",
-        "星期一",
-        "星期二",
-        "星期三",
-        "星期四",
-        "星期五",
-        "星期六",
-      ];
-      this.week = weeks[wk];
-    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .header {
+  color: #303030;
   position: relative;
   z-index: 1;
+  height: 180px;
+  background: url("../../assets/images/BG_db@2x.png") no-repeat center center;
+  background-size: cover;
 }
 .main-cen {
   max-width: 1200px;
   margin: 0 auto;
 }
-.header-top {
-  height: 35px;
-  line-height: 35px;
-  width: 100%;
-  border-bottom: 1px solid #ddd;
-}
-#webjx {
-  font-size: 12px;
-  color: #666;
-  float: left;
-}
-.header-link {
-  float: right;
-  & > .links {
-    user-select: none;
-    color: #666;
-    cursor: pointer;
-    transition: all 0.2s;
-    &:hover {
-      color: #c9001f;
+.dis_just {
+  padding-top: 28px;
+  padding-bottom: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > .left {
+  }
+  & > .right {
+    & > span {
+      margin-right: 6px;
     }
   }
 }
-.header-link li {
-  float: left;
-  margin-left: 10px;
-  font-size: 12px;
-  color: #aaa;
-}
-.header-logo {
-  background: url("../../assets/images/top-bg.jpg") bottom center repeat;
-  background-size: cover;
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-.logo {
-  float: left;
-}
-.header-tel {
-  float: right;
-  line-height: 50px;
-  margin-left: 15px;
-  margin-top: -8px;
-}
-.header-tel p {
+.dis_flex {
   display: flex;
-  color: #00a2eb;
-  font-weight: bold;
-  font-size: 18px;
-}
-.header-tel p span {
-  float: right;
-  color: #00a2eb;
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 24px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-.header-tel p i {
-  font-size: 20px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-.header-tel p.con01 {
-  height: 45px;
-}
-.header-tel p.con02 {
-  height: 40px;
-  line-height: 40px;
-}
-.hedaer-search {
-  float: right;
-  margin-top: 15px;
-}
-.hedaer-search input {
-  border: 1px solid #c9001f;
-  line-height: 42px;
-  height: 42px;
-  padding-left: 15px;
-  color: #888;
-  font-size: 14px;
-  float: left;
-  width: 220px;
-  background: #fff;
+  align-items: center;
+  justify-content: space-between;
+  & > img {
+    cursor: pointer;
+    width: 400px;
+    height: 70px;
+  }
+  & > .right {
+    display: flex;
+    align-items: center;
+    & > .input_x {
+      padding: 11px;
+      border: 1px solid #c9001f;
+      height: 40px;
+      line-height: 40px;
+    }
+    & > .btn {
+      width: 52px;
+      height: 40px;
+      background-color: #c9001f;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
 }
-.hedaer-search button {
-  height: 42px;
-  width: 42px;
-  background: url("../../assets/images/sousuo-icon.jpg") center center no-repeat;
-  border: none;
-  text-indent: -9999em;
+.links {
   cursor: pointer;
+  user-select: none;
 }
 </style>

src/components/userInfo/index.vue

@@ -4,6 +4,7 @@
       :close-on-click-modal="false"
       title="用户信息"
       :visible.sync="dialogVisible"
+      :append-to-body="true"
       width="700px"
     >
       <el-tabs type="border-card" v-model="active">

src/utils/request.js

@@ -6,8 +6,8 @@ import { set } from 'nprogress'
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
-export const BASE_URL = 'http://192.168.1.28:8032/'
-export const BASE_IMG_URL = 'http://192.168.1.28:8032'
+export const BASE_URL = 'http://xfxh.gdzzkj.net/'
+export const BASE_IMG_URL = 'http://xfxh.gdzzkj.net'
 // export const BASE_IMG_URL = process.env.VUE_APP_IMG_API
 
 const service = axios.create({

src/views/System/contentSet/article/index.vue

@@ -114,6 +114,11 @@ export default {
           label: "标题",
           prop: "Title",
         },
+        {
+          label: "图片",
+          prop: "ImageUrl",
+          scope: "image",
+        },
         {
           label: "是否置顶",
           prop: "IsTop",

src/views/System/contentSet/article/operation.vue

@@ -34,6 +34,24 @@
               <el-input v-model.trim="ruleForm.Title"></el-input>
             </el-form-item>
           </el-col>
+          <el-col :span="24">
+            <el-form-item label="图片上传" prop="ImageUrl">
+              <el-image
+                v-if="ruleForm.ImageUrl"
+                style="width: 112px; height: 70px"
+                :src="$methods.splitImgHost(ruleForm.ImageUrl)"
+                :preview-src-list="[$methods.splitImgHost(ruleForm.ImageUrl)]"
+              >
+              </el-image>
+              <label for="uploads"><span class="btn">上传图片</span></label>
+              <input
+                type="file"
+                id="uploads"
+                style="display: none"
+                @change="uploadImg"
+              />
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
             <el-form-item label="是否置顶" prop="IsTop">
               <el-radio-group v-model="ruleForm.IsTop">
@@ -97,9 +115,13 @@ export default {
         IsMemberRead: false,
         Status: 1,
         MenuId: "",
+        ImageUrl: "",
       },
       rules: {
         Title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        ImageUrl: [
+          { required: true, message: "请上传图片", trigger: "change" },
+        ],
         MenuId: [
           {
             required: true,
@@ -121,11 +143,40 @@ export default {
           IsTop: false,
           IsMemberRead: false,
           Status: 1,
+          ImageUrl: "",
           MenuId: "",
         };
       }
       this.dialogVisible = true;
     },
+    uploadImg(e) {
+      var self = this;
+      var file = e.target.files[0];
+      if (file === undefined) {
+        return;
+      }
+      if (file.size > 0.3 * 1024 * 1024) {
+        self.$message.error("图片不得大于300kb");
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
+        self.$message.error("上传格式需为：.jpg/.png/.jpeg");
+        e.target.value = "";
+        return;
+      }
+      let formDatas = new FormData();
+      formDatas.append("file", file);
+      this.$api
+        .XfSysBussinessUploadFile(formDatas)
+        .then((res) => {
+          this.$set(this.ruleForm, "ImageUrl", res.Data);
+          this.$refs["ruleForm"].validateField("ImageUrl");
+        })
+        .finally(() => {
+          e.target.value = "";
+        });
+    },
     close() {
       this.loading = false;
       this.$refs["ruleForm"].resetFields();

src/views/home/index copy.vue

@@ -0,0 +1,391 @@
+<template>
+  <div id="home">
+    <el-carousel height="500px">
+      <el-carousel-item v-for="(item, index) in BannerList1" :key="index">
+        <img
+          style="width: 100%; height: 100%"
+          :src="$methods.splitImgHost(item.ImageUrl)"
+          alt=""
+        />
+      </el-carousel-item>
+    </el-carousel>
+    <div class="novt_box center_1200">
+      <el-carousel height="350px" style="width: 560px" class="carousel">
+        <el-carousel-item v-for="(item, index) in BannerList2" :key="index">
+          <img
+            style="width: 100%; height: 100%"
+            :src="$methods.splitImgHost(item.ImageUrl)"
+            alt=""
+          />
+          <h3>
+            <span>{{ item.Title }}</span
+            ><span>{{ $methods.onlyFormaHao(item.CreateTime, false) }}</span>
+          </h3>
+        </el-carousel-item>
+      </el-carousel>
+      <el-tabs type="border-card" style="width: 620px; height: 350px">
+        <el-tab-pane label="通知通告" class="tabBox">
+          <ul>
+            <li
+              class="li_list"
+              v-for="(item, index) in notList"
+              :key="index"
+              @click="jumpInfo(item)"
+            >
+              <div class="title_li">{{ item.Title }}</div>
+              <div class="time_li">
+                {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
+              </div>
+            </li>
+          </ul>
+          <el-pagination
+            class="paginations"
+            @current-change="handleCurrentChange"
+            :current-page.sync="formData.pagesize"
+            :page-size="formData.pageindex"
+            layout="total, prev, pager, next"
+            :total="total"
+          >
+          </el-pagination>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="content_list center_1200">
+      <div class="content_list_box">
+        <h2 class="title">协会动态<i></i></h2>
+        <ul>
+          <template v-for="(item, index) in list1">
+            <div
+              v-if="index === 0"
+              class="content_list_imgBox"
+              @click="jumpInfo(item)"
+            >
+              <img :src="$methods.splitImgHost(item.NewsImg)" alt="" />
+              <div class="footers">
+                <div class="left">
+                  {{ item.Title }}
+                </div>
+                <div class="right">
+                  {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
+                </div>
+              </div>
+            </div>
+            <li v-else class="footers_li" @click="jumpInfo(item)">
+              <div class="left">{{ item.Title }}</div>
+              <div class="right">
+                {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+      <div class="content_list_box">
+        <h2 class="title">行业新闻<i></i></h2>
+        <ul>
+          <template v-for="(item, index) in list2">
+            <div
+              v-if="index === 0"
+              class="content_list_imgBox"
+              @click="jumpInfo(item)"
+            >
+              <img :src="$methods.splitImgHost(item.NewsImg)" alt="" />
+              <div class="footers">
+                <div class="left">
+                  {{ item.Title }}
+                </div>
+                <div class="right">
+                  {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
+                </div>
+              </div>
+            </div>
+            <li v-else class="footers_li" @click="jumpInfo(item)">
+              <div class="left">{{ item.Title }}</div>
+              <div class="right">
+                {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+    <div style="padding: 15px 0px; overflow: hidden">
+      <h2 class="link_s">友情链接</h2>
+      <Scroller :lists="lists"></Scroller>
+    </div>
+  </div>
+</template>
+
+<script>
+import Scroller from "@/components/Scroller/index.vue";
+export default {
+  components: { Scroller },
+  data() {
+    return {
+      notList: [],
+      total: 0,
+      formData: {
+        pageindex: 4, //每页内容条数
+        pagesize: 1, //当前第几页
+      },
+      lists: [], //友情链接
+      list1: [], //协会动态列表
+      list2: [], //行业新闻列表
+      BannerList1: [], //Banner1列表
+      BannerList2: [], //Banner2列表
+    };
+  },
+  created() {
+    this.getInit();
+  },
+  methods: {
+    getInit() {
+      this.getNewPositionList(); // 首页通告等
+      this.getBannerList(); // 获取首页广告轮播Banner列表
+      this.getWebFriendlinks(); // 获取友情链接列表
+    },
+    // 首页通告等
+    getNewPositionList() {
+      // seat:0全部，1通知通告，3协会动态，4行业新闻
+      this.getList();
+      this.$api
+        .XfWebApiGetNewPositionList({ seat: 3, pageindex: 5, pagesize: 1 })
+        .then((res) => {
+          this.list1 = res.Data.List;
+        });
+
+      this.$api
+        .XfWebApiGetNewPositionList({ seat: 4, pageindex: 5, pagesize: 1 })
+        .then((res) => {
+          this.list2 = res.Data.List;
+        });
+    },
+    //通知列表
+    getList() {
+      this.$api
+        .XfWebApiGetNewPositionList({ seat: 1, ...this.formData })
+        .then((res) => {
+          this.notList = res.Data.List;
+          this.total = res.Data.TotalCount;
+        });
+    },
+    // 获取首页广告轮播Banner列表
+    getBannerList() {
+      //type:1首页2新闻3飘窗广告
+      this.$api.XfWebApiGetBannerList({ type: 1 }).then((res) => {
+        this.BannerList1 = res.Data || [];
+      });
+      this.$api.XfWebApiGetBannerList({ type: 2 }).then((res) => {
+        this.BannerList2 = res.Data || [];
+      });
+    },
+    // 获取友情链接列表
+    getWebFriendlinks() {
+      this.$api.XfWebApiGetWebFriendlinks().then((res) => {
+        this.lists = res.Data;
+      });
+    },
+    handleCurrentChange(e) {
+      this.formData.pageindex = e;
+      this.getList();
+    },
+    //跳转详情页
+    jumpInfo(e) {
+      this.$router.push({
+        path: "info",
+        query: {
+          MenuId: e.MenuId,
+          NewsId: e.NewsId,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .carousel .el-carousel__indicators--horizontal {
+  display: none;
+}
+.el-carousel__item h3 {
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  line-height: 36px;
+  height: 36px;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 12px;
+  & > span {
+    &:first-child {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &:last-child {
+      flex-shrink: 0;
+      font-size: 14px;
+    }
+  }
+}
+.link_s {
+  font-size: 22px;
+  margin: 10px 0px;
+  text-align: center;
+  color: #333;
+  font-weight: 400;
+}
+/*样式的话可以写*/
+.content_list {
+  display: flex;
+  justify-content: space-between;
+  & > .content_list_box {
+    width: 580px;
+    .title {
+      font-weight: bold;
+      font-size: 22px;
+      border-bottom: 1px solid #ddd;
+      height: 55px;
+      position: relative;
+      line-height: 55px;
+      margin-bottom: 30px;
+      & > i {
+        position: absolute;
+        background: #c9001f;
+        width: 40px;
+        height: 5px;
+        left: 0px;
+        bottom: -1px;
+      }
+    }
+    .content_list_imgBox {
+      position: relative;
+      width: 580px;
+      height: 270px;
+      overflow: hidden;
+      margin-bottom: 10px;
+      cursor: pointer;
+      & > img {
+        width: 100%;
+        height: 100%;
+        transition: all 0.3s;
+      }
+      &:hover img {
+        transform: scale(1.2);
+      }
+      & > .footers {
+        position: absolute;
+        z-index: 999;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        height: 50px;
+        background-color: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        padding: 0px 15px;
+        color: #fff;
+        font-size: 16px;
+        & > .left {
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        & > .right {
+          flex-shrink: 0;
+          word-spacing: 0px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+.footers_li {
+  margin-bottom: 10px;
+  cursor: pointer;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0px 15px;
+  font-size: 16px;
+  color: #333;
+  transition: all 0.3s;
+  &:hover {
+    background-color: rgb(201, 0, 31);
+    color: #fff;
+  }
+  & > .left {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  & > .right {
+    flex-shrink: 0;
+    word-spacing: 0px;
+    font-size: 14px;
+  }
+}
+.tabBox {
+  display: flex;
+  flex-direction: column;
+  height: 280px;
+  ul {
+    flex: 1;
+    overflow: auto;
+  }
+  .paginations {
+    height: 32px;
+  }
+}
+.li_list {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  border-bottom: 1px dashed #ddd;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    color: #c9001f;
+  }
+  & > .title_li {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  & > .time_li {
+    font-size: 14px;
+    word-spacing: 0px;
+  }
+}
+.novt_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #c9001f;
+  font-weight: bold;
+  border-top: 3px solid #c9001f;
+}
+</style>

src/views/home/index.vue

@@ -1,111 +1,231 @@
 <template>
   <div id="home">
-    <el-carousel height="500px">
-      <el-carousel-item v-for="(item, index) in BannerList1" :key="index">
-        <img
-          style="width: 100%; height: 100%"
-          :src="$methods.splitImgHost(item.ImageUrl)"
-          alt=""
-        />
-      </el-carousel-item>
-    </el-carousel>
-    <div class="novt_box center_1200">
-      <el-carousel height="350px" style="width: 560px" class="carousel">
-        <el-carousel-item v-for="(item, index) in BannerList2" :key="index">
-          <img
-            style="width: 100%; height: 100%"
-            :src="$methods.splitImgHost(item.ImageUrl)"
-            alt=""
-          />
-          <h3>
-            <span>{{ item.Title }}</span
-            ><span>{{ $methods.onlyFormaHao(item.CreateTime, false) }}</span>
-          </h3>
-        </el-carousel-item>
-      </el-carousel>
-      <el-tabs type="border-card" style="width: 620px; height: 350px">
-        <el-tab-pane label="通知通告" class="tabBox">
-          <ul>
+    <div
+      style="width: 1200px; background-color: #fff; padding: 28px 28px 58px"
+      class="center_1200"
+    >
+      <div class="newClass">
+        <div class="logo"></div>
+        <ul class="uls">
+          <li class="lis" v-for="(item, index) in tableData">
+            <div class="top">
+              {{ item.Title }}
+            </div>
+            <div class="foot">
+              <div class="left">
+                {{ $methods.onlyFormaHao(item.CreateTime, false) }}
+              </div>
+              <div class="right" @click="jumpInfo(item)">【详细】</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="novt_box">
+        <el-tabs type="border-card" style="width: 620px; height: 350px">
+          <el-tab-pane label="通知通告" class="tabBox">
+            <ul>
+              <li
+                class="li_list"
+                v-for="(item, index) in notList"
+                :key="index"
+                @click="jumpInfo(item)"
+              >
+                <i>●</i>
+                <div class="title_li">{{ item.Title }}</div>
+                <div class="time_li">
+                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
+                </div>
+              </li>
+            </ul>
+            <div style="text-align: center">
+              <el-pagination
+                class="paginations"
+                @current-change="handleCurrentChange"
+                :current-page.sync="formData.pageindex"
+                :page-size="formData.pagesize"
+                layout="total, prev, pager, next"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <el-carousel height="350px" style="width: 560px" class="carousel">
+          <el-carousel-item v-for="(item, index) in BannerList2" :key="index">
+            <img
+              style="width: 100%; height: 100%"
+              :src="$methods.splitImgHost(item.ImageUrl)"
+              alt=""
+            />
+            <h3>
+              <span>{{ item.Title }}</span
+              ><span>{{ $methods.onlyFormaHao(item.CreateTime, false) }}</span>
+            </h3>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <div class="margin_28">
+        <div
+          class="small_box"
+          v-for="(item, index) in smallBoxList"
+          :key="index"
+          @click="jumpPage(item)"
+        >
+          <img :src="item.img" alt="" />
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+      <div class="dis_flex_px">
+        <div class="li_px">
+          <div class="header_px">
+            <span class="left">协会动态</span>
+          </div>
+          <ul class="ul_px">
+            <el-empty
+              :image-size="100"
+              description="暂无数据"
+              v-if="list1.length === 0"
+            ></el-empty>
             <li
               class="li_list"
-              v-for="(item, index) in notList"
+              v-for="(item, index) in list1"
               :key="index"
               @click="jumpInfo(item)"
             >
+              <i>●</i>
               <div class="title_li">{{ item.Title }}</div>
               <div class="time_li">
                 {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
               </div>
             </li>
           </ul>
-          <el-pagination
-            class="paginations"
-            @current-change="handleCurrentChange"
-            :current-page.sync="formData.pagesize"
-            :page-size="formData.pageindex"
-            layout="total, prev, pager, next"
-            :total="total"
-          >
-          </el-pagination>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <div class="content_list center_1200">
-      <div class="content_list_box">
-        <h2 class="title">协会动态<i></i></h2>
-        <ul>
-          <template v-for="(item, index) in list1">
-            <div
-              v-if="index === 0"
-              class="content_list_imgBox"
+          <div class="paginationBox">
+            <el-pagination
+              v-if="list1.length !== 0"
+              class="paginations"
+              @current-change="handleCurrentChange1"
+              :current-page.sync="formData1.pageindex"
+              :page-size="formData1.pagesize"
+              layout="total, prev, pager, next"
+              :total="total1"
+            >
+            </el-pagination>
+          </div>
+        </div>
+        <div class="li_px">
+          <div class="header_px">
+            <span class="left">行业新闻</span>
+          </div>
+          <ul class="ul_px">
+            <el-empty
+              :image-size="100"
+              description="暂无数据"
+              v-if="list2.length === 0"
+            ></el-empty>
+            <li
+              class="li_list"
+              v-for="(item, index) in list2"
+              :key="index"
               @click="jumpInfo(item)"
             >
-              <img :src="$methods.splitImgHost(item.NewsImg)" alt="" />
-              <div class="footers">
-                <div class="left">
-                  {{ item.Title }}
-                </div>
-                <div class="right">
-                  {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
-                </div>
-              </div>
-            </div>
-            <li v-else class="footers_li" @click="jumpInfo(item)">
-              <div class="left">{{ item.Title }}</div>
-              <div class="right">
-                {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
+              <i>●</i>
+              <div class="title_li">{{ item.Title }}</div>
+              <div class="time_li">
+                {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
               </div>
             </li>
-          </template>
-        </ul>
-      </div>
-      <div class="content_list_box">
-        <h2 class="title">行业新闻<i></i></h2>
-        <ul>
-          <template v-for="(item, index) in list2">
-            <div
-              v-if="index === 0"
-              class="content_list_imgBox"
+          </ul>
+          <div class="paginationBox">
+            <el-pagination
+              v-if="list2.length !== 0"
+              class="paginations"
+              @current-change="handleCurrentChange2"
+              :current-page.sync="formData2.pageindex"
+              :page-size="formData2.pagesize"
+              layout="total, prev, pager, next"
+              :total="total2"
+            >
+            </el-pagination>
+          </div>
+        </div>
+        <div class="li_px">
+          <div class="header_px">
+            <span class="left">政策法规</span>
+          </div>
+          <ul class="ul_px">
+            <el-empty
+              :image-size="100"
+              description="暂无数据"
+              v-if="list3.length === 0"
+            ></el-empty>
+            <li
+              class="li_list"
+              v-for="(item, index) in list3"
+              :key="index"
               @click="jumpInfo(item)"
             >
-              <img :src="$methods.splitImgHost(item.NewsImg)" alt="" />
-              <div class="footers">
-                <div class="left">
-                  {{ item.Title }}
-                </div>
-                <div class="right">
-                  {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
-                </div>
-              </div>
-            </div>
-            <li v-else class="footers_li" @click="jumpInfo(item)">
-              <div class="left">{{ item.Title }}</div>
-              <div class="right">
-                {{ $methods.onlyFormaHao(item.NewsCreateTime) }}
+              <i>●</i>
+              <div class="title_li">{{ item.Title }}</div>
+              <div class="time_li">
+                {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
               </div>
             </li>
-          </template>
-        </ul>
+          </ul>
+          <div class="paginationBox">
+            <el-pagination
+              v-if="list3.length !== 0"
+              class="paginations"
+              @current-change="handleCurrentChange3"
+              :current-page.sync="formData3.pageindex"
+              :page-size="formData3.pagesize"
+              layout="total, prev, pager, next"
+              :total="total3"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+      <div class="vipBox">
+        <div class="top">
+          <span class="left">会员天地</span
+          ><span class="right" @click="jumpPage({ label: '会员天地' })"
+            >更多+</span
+          >
+        </div>
+        <el-empty
+          :image-size="100"
+          description="暂无数据"
+          v-if="list4.length === 0"
+        ></el-empty>
+        <div class="swiperBox" v-else>
+          <i
+            v-if="list4.length > 4"
+            class="el-icon-arrow-left left"
+            @click="leftJump"
+          ></i>
+          <swiper
+            ref="swiper"
+            @swiper="onSwiper"
+            @slideChange="onSlideChange"
+            v-bind:options="swiperOptions"
+          >
+            <swiper-slide v-for="(item, index) in list4" :key="index">
+              <img
+                style="width: 100%; height: 170px"
+                :src="$methods.splitImgHost(item.NewsImg)"
+                alt=""
+              />
+              <p class="p_text">
+                {{ item.Title }}
+              </p>
+            </swiper-slide>
+          </swiper>
+          <i
+            v-if="list4.length > 4"
+            class="el-icon-arrow-right right"
+            @click="rightJump"
+          ></i>
+        </div>
       </div>
     </div>
     <div style="padding: 15px 0px; overflow: hidden">
@@ -116,56 +236,177 @@
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
 import Scroller from "@/components/Scroller/index.vue";
 export default {
-  components: { Scroller },
+  components: {
+    Swiper,
+    SwiperSlide,
+    Scroller,
+  },
   data() {
+    let self = this;
     return {
+      smallBoxList: [
+        { img: require("@/assets/images/icon_pxjd@2x.png"), label: "培训鉴定" },
+        { img: require("@/assets/images/icon_zjzk@2x.png"), label: "专家智库" },
+        { img: require("@/assets/images/icon_hytd@2x.png"), label: "会员天地" },
+        { img: require("@/assets/images/icon_xhqk@2x.png"), label: "协会期刊" },
+      ],
+      swiperOptions: {
+        slidesPerView: 4,
+        spaceBetween: 20,
+        loop: false,
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false,
+        },
+        on: {
+          click: function () {
+            // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
+            // console.log(this); // -> Swiper
+            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
+            let initIndex =
+              this.clickedIndex - this.activeIndex + this.realIndex;
+            self.handleClickSlide(initIndex);
+          },
+        },
+      },
       notList: [],
       total: 0,
+      total1: 0,
+      total2: 0,
+      total3: 0,
+      total4: 0,
       formData: {
-        pageindex: 4, //每页内容条数
-        pagesize: 1, //当前第几页
+        pagesize: 6, //每页内容条数
+        pageindex: 1, //当前第几页
+      },
+      formData1: {
+        pagesize: 5, //每页内容条数
+        pageindex: 1, //当前第几页
+      },
+      formData2: {
+        pagesize: 5, //每页内容条数
+        pageindex: 1, //当前第几页
+      },
+      formData3: {
+        pagesize: 5, //每页内容条数
+        pageindex: 1, //当前第几页
+      },
+      formData4: {
+        pagesize: 5, //每页内容条数
+        pageindex: 1, //当前第几页
       },
       lists: [], //友情链接
       list1: [], //协会动态列表
       list2: [], //行业新闻列表
+      list3: [], //政策法规列表
+      list4: [], //会员天地列表
       BannerList1: [], //Banner1列表
       BannerList2: [], //Banner2列表
+      tableData: [], //最新3条文章
     };
   },
   created() {
     this.getInit();
   },
   methods: {
+    jumpPage(e) {
+      for (let i = 0; i < this.$store.state.asyncRouter.length; i++) {
+        if (this.$store.state.asyncRouter[i].Name === e.label) {
+          if (
+            this.$store.state.asyncRouter[i].ChildList &&
+            this.$store.state.asyncRouter[i].ChildList.length > 0
+          ) {
+            this.$router.push({
+              path: `menuList?ParentId=${this.$store.state.asyncRouter[i].ChildList[0].ParentId}&MenuId=${this.$store.state.asyncRouter[i].ChildList[0].MenuId}`,
+            });
+            return;
+          } else {
+            this.$message.error("请联系管理员新增对应路由");
+            return;
+          }
+        }
+      }
+    },
+    leftJump() {
+      this.$refs.swiper.$swiper.slidePrev();
+    },
+    rightJump() {
+      this.$refs.swiper.$swiper.slideNext();
+    },
+    handleClickSlide(index) {
+      this.jumpInfo(this.list4[index])
+    },
+    onSwiper(swiper) {
+      console.log(swiper);
+    },
+    onSlideChange() {},
     getInit() {
       this.getNewPositionList(); // 首页通告等
       this.getBannerList(); // 获取首页广告轮播Banner列表
       this.getWebFriendlinks(); // 获取友情链接列表
+      this.newList(); //获取最新3条文章
+    },
+    newList() {
+      this.$api.XfWebApiGetNewsReList().then((res) => {
+        this.tableData = res.Data.List || [];
+      });
     },
     // 首页通告等
     getNewPositionList() {
-      // seat:0全部，1通知通告，3协会动态，4行业新闻
+      // seat:0全部，1通知通告，3协会动态，4行业新闻,5政策法规,6会员天地
       this.getList();
+      this.getList1();
+      this.getList2();
+      this.getList3();
+      this.getList4();
+    },
+    //通知列表
+    getList() {
       this.$api
-        .XfWebApiGetNewPositionList({ seat: 3, pageindex: 5, pagesize: 1 })
+        .XfWebApiGetNewPositionList({ seat: 1, ...this.formData })
         .then((res) => {
-          this.list1 = res.Data.List;
+          this.notList = res.Data.List || [];
+          this.total = res.Data.TotalCount;
         });
-
+    },
+    //协会动态
+    getList1() {
       this.$api
-        .XfWebApiGetNewPositionList({ seat: 4, pageindex: 5, pagesize: 1 })
+        .XfWebApiGetNewPositionList({ seat: 3, ...this.formData1 })
         .then((res) => {
-          this.list2 = res.Data.List;
+          this.list1 = res.Data.List || [];
+          this.total1 = res.Data.TotalCount;
         });
     },
-    //通知列表
-    getList() {
+    //行业新闻
+    getList2() {
       this.$api
-        .XfWebApiGetNewPositionList({ seat: 1, ...this.formData })
+        .XfWebApiGetNewPositionList({ seat: 4, ...this.formData2 })
         .then((res) => {
-          this.notList = res.Data.List;
-          this.total = res.Data.TotalCount;
+          this.list2 = res.Data.List || [];
+          this.total2 = res.Data.TotalCount;
+        });
+    },
+    //政策法规
+    getList3() {
+      this.$api
+        .XfWebApiGetNewPositionList({ seat: 5, ...this.formData3 })
+        .then((res) => {
+          this.list3 = res.Data.List || [];
+          this.total3 = res.Data.TotalCount;
+        });
+    },
+    //会员天地
+    getList4() {
+      this.$api
+        .XfWebApiGetNewPositionList({ seat: 6, ...this.formData4 })
+        .then((res) => {
+          this.list4 = res.Data.List || [];
+          this.total4 = res.Data.TotalCount;
         });
     },
     // 获取首页广告轮播Banner列表
@@ -188,6 +429,22 @@ export default {
       this.formData.pageindex = e;
       this.getList();
     },
+    handleCurrentChange1(e) {
+      this.formData1.pageindex = e;
+      this.getList1();
+    },
+    handleCurrentChange2(e) {
+      this.formData2.pageindex = e;
+      this.getList2();
+    },
+    handleCurrentChange3(e) {
+      this.formData3.pageindex = e;
+      this.getList3();
+    },
+    handleCurrentChange4(e) {
+      this.formData4.pageindex = e;
+      this.getList4();
+    },
     //跳转详情页
     jumpInfo(e) {
       this.$router.push({
@@ -206,6 +463,191 @@ export default {
 ::v-deep .carousel .el-carousel__indicators--horizontal {
   display: none;
 }
+#home {
+  background: url("../../assets/images/BG_01@2x.png") no-repeat center center;
+  background-size: cover;
+}
+.p_text {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.newClass {
+  margin-bottom: 28px;
+  padding: 3px 24px;
+  background-color: #fff1f3;
+  display: flex;
+  align-items: center;
+  .logo {
+    width: 102px;
+    height: 102px;
+    flex-shrink: 0;
+    background: url("../../assets/images/zxzx@2x.png") no-repeat center center;
+    background-size: cover;
+  }
+  .uls {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .lis {
+      margin-left: 45px;
+      flex: 1;
+      .top {
+        height: 36px;
+        color: #333333;
+        margin-bottom: 14px;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .foot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .left {
+          color: #828282;
+        }
+        .right {
+          color: #c9001f;
+          user-select: none;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.margin_28 {
+  margin: 28px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > .small_box {
+    user-select: none;
+    cursor: pointer;
+    width: 269px;
+    height: 98px;
+    background-color: #ebebeb;
+    padding: 11px 24px;
+    box-sizing: border-box;
+    border: 1px solid #c9001f;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s;
+    &:hover {
+      // transform: scale(1.1);
+      box-shadow: 0px 0px 8px 4px rgba($color: #c9001f, $alpha: 0.5);
+    }
+    img {
+      width: 88px;
+      height: 79px;
+      margin-right: 19px;
+    }
+    span {
+      color: #333333;
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+.dis_flex_px {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > .li_px {
+    width: 368px;
+    height: 314px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    & > .header_px {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 45px;
+      border-bottom: 1px solid #e0e0e0;
+      & > .left {
+        width: 120px;
+        height: 45px;
+        line-height: 46px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 20px;
+        color: #fff;
+        background-color: #c9001f;
+      }
+      & > .right {
+        user-select: none;
+        cursor: pointer;
+        font-size: 15px;
+        color: #c9001f;
+        margin-right: 20px;
+      }
+    }
+    & > .ul_px {
+      flex: 1;
+      height: 1px;
+      padding: 10px 20px 4px;
+    }
+    & > .paginationBox {
+      height: 34px;
+      text-align: center;
+    }
+  }
+}
+.vipBox {
+  margin-top: 48px;
+  border: 1px solid #e0e0e0;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 24px;
+    height: 46px;
+    background-color: #f0f0f0;
+    & > .left {
+      font-weight: bold;
+      font-size: 20px;
+      color: #333;
+    }
+    & > .right {
+      user-select: none;
+      cursor: pointer;
+      font-size: 15px;
+      color: #c9001f;
+    }
+  }
+  .swiperBox {
+    padding: 28px 0px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & > .left {
+      color: red;
+      font-size: 28px;
+      font-weight: bold;
+      margin-right: 10px;
+      cursor: pointer;
+      user-select: none;
+    }
+    & > .swiper-container{
+      flex: 1;
+    }
+    & > .right {
+      color: red;
+      font-size: 28px;
+      font-weight: bold;
+      margin-left: 10px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
 .el-carousel__item h3 {
   color: #fff;
   text-align: center;
@@ -346,22 +788,28 @@ export default {
   }
 }
 .li_list {
+  list-style-type: lower-latin;
   display: flex;
   align-items: center;
-  height: 60px;
-  border-bottom: 1px dashed #ddd;
-  font-size: 16px;
+  height: 41px;
+  font-size: 15px;
   color: #666;
   cursor: pointer;
   transition: all 0.3s;
   &:hover {
     color: #c9001f;
   }
+  & > i {
+    transform: scale(0.8);
+    color: #c9001f;
+    margin-right: 6px;
+  }
   & > .title_li {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-right: 10px;
   }
   & > .time_li {
     font-size: 14px;

src/views/info/index.vue

@@ -9,7 +9,8 @@
           <h2>{{ infoData.Title }}</h2>
           <div class="left_top_share">
             <div>{{ $methods.onlyFormaHao(infoData.CreateTime) }}</div>
-            <div>分享</div>
+            <!-- <div>分享</div> -->
+            <share :config="config">分享</share>
           </div>
         </div>
         <div class="content" v-html="infoData.NewContent"></div>
@@ -38,13 +39,37 @@
 </template>
 
 <script>
+import Share from "vue-social-share";
+import "@/assets/css/client.css";
 export default {
+  components: { Share },
   data() {
     return {
       routerData: {},
       listData: [],
       infoData: {},
       headerData: {},
+      config: {
+        // url: "", // 网址，默认使用 window.location.href
+        source: "", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
+        title: "", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
+        description: "", // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
+        image: "", // 图片, 默认取网页中第一个img标签
+        sites: [
+          "qzone",
+          "qq",
+          "weibo",
+          "wechat",
+          "linkedin",
+          "google",
+          "facebook",
+          "twitter",
+        ], // 启用的站点
+        // disabled: ["google", "facebook", "twitter"], // 禁用的站点
+        wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
+        wechatQrcodeHelper:
+          "<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>",
+      },
     };
   },
   watch: {