hrjy 2 년 전
부모
커밋
440ee47c1e
61개의 변경된 파일4233개의 추가작업 그리고 84개의 파일을 삭제
  1. 596 12
      package-lock.json
  2. 8 1
      package.json
  3. BIN
      public/favicon.ico
  4. 1 1
      public/index.html
  5. 207 5
      src/App.vue
  6. BIN
      src/assets/img/box-bg.png
  7. BIN
      src/assets/img/index-h.png
  8. BIN
      src/assets/img/indexNav/i1.png
  9. BIN
      src/assets/img/indexNav/i2.png
  10. BIN
      src/assets/img/indexNav/i3.png
  11. BIN
      src/assets/img/indexNav/i4.png
  12. BIN
      src/assets/img/indexNav/i5.png
  13. BIN
      src/assets/img/indexNav/i6.png
  14. BIN
      src/assets/img/indexNav/i7.png
  15. BIN
      src/assets/img/indexNav/i8.png
  16. BIN
      src/assets/img/indexNav/i9.png
  17. BIN
      src/assets/img/logo-1.png
  18. BIN
      src/assets/img/logo-2.png
  19. BIN
      src/assets/img/logo.png
  20. BIN
      src/assets/img/navList/nav1.png
  21. BIN
      src/assets/img/navList/nav2.png
  22. BIN
      src/assets/img/navList/nav3.png
  23. BIN
      src/assets/img/navList/nav4.png
  24. BIN
      src/assets/img/navList/nav5.png
  25. BIN
      src/assets/img/navList/nav6.png
  26. BIN
      src/assets/img/navList/nav7.png
  27. BIN
      src/assets/img/qrcode.png
  28. BIN
      src/assets/img/scanning.png
  29. BIN
      src/assets/img/search.png
  30. BIN
      src/assets/img/yq1.png
  31. BIN
      src/assets/img/yq2.png
  32. BIN
      src/assets/img/yq3.png
  33. BIN
      src/assets/img/yq4.png
  34. BIN
      src/assets/img/yq5.png
  35. 683 0
      src/assets/js/md5.js
  36. 51 0
      src/assets/js/sha1.js
  37. 0 59
      src/components/HelloWorld.vue
  38. 28 0
      src/components/article.vue
  39. 343 0
      src/components/box.vue
  40. 84 0
      src/components/slideLaR.vue
  41. 74 0
      src/components/slideUpd.vue
  42. 6 1
      src/main.js
  43. 64 0
      src/request/api.js
  44. 105 0
      src/request/request.js
  45. 66 3
      src/router/index.js
  46. 53 0
      src/store/index.js
  47. 36 0
      src/utils/utils.js
  48. 71 0
      src/views/business/business.vue
  49. 83 0
      src/views/contactUs/contactUs.vue
  50. 53 0
      src/views/content.vue
  51. 162 0
      src/views/contribution.vue
  52. 97 0
      src/views/details.vue
  53. 663 2
      src/views/index.vue
  54. 51 0
      src/views/introduce/introduce.vue
  55. 50 0
      src/views/law/law.vue
  56. 52 0
      src/views/news/news.vue
  57. 51 0
      src/views/partake/partake.vue
  58. 186 0
      src/views/searchList.vue
  59. 183 0
      src/views/vList.vue
  60. 96 0
      src/views/volunteer.vue
  61. 30 0
      vue.config.js

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 596 - 12
package-lock.json


+ 8 - 1
package.json

@@ -4,13 +4,20 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "dev": "npm run serve"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.6",
     "node-sass": "^7.0.0",
+    "save": "^2.4.0",
+    "swiper": "^5.4.5",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0",
+    "vue-touch": "^2.0.0-beta.4",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

BIN
public/favicon.ico


+ 1 - 1
public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>荆门市红十字会</title>
   </head>
   <body>
     <noscript>

+ 207 - 5
src/App.vue

@@ -1,9 +1,211 @@
 <template>
-  <div id="app">
-    <router-view/>
-  </div>
+<div class="">
+	<div class="bg">
+		<img src="@/assets/img/box-bg.png" >
+	</div>
+	<div id="app" class="app">
+		<div class="boxHeader">
+			<div class="boxLogo">
+				<img src="@/assets/img/logo.png" >
+			</div>
+			<div class="boxSearch">
+				<input type="text" v-model="searchValue" placeholder="输入关键词搜索" required />
+				<img src="@/assets/img/search.png" class="searchImg" @click="search">
+			</div>
+		</div>
+		<div class="boxNav">
+			<div class="nav" v-for="(n,index) in navList" :class="{navC: isNav == index}" @click="navChoose(index,n)">
+				<img :src="n.img" class="navImg">
+				<div class="navName">
+					{{ n.name }}
+				</div>
+			</div>
+		</div>
+	  <router-view />
+	</div>
+	<div class="footer">
+		版权所有:Copyright©2017-2037  版权所有 荆门市红十字会 <br>
+		地址:湖北省荆门市东宝区金虾路60号 浙ICP备17054590号-1
+	</div>
+</div>
 </template>
-
+<script>
+import { getList,getSearch } from '@/request/api.js'
+	export default {
+		data() {
+			return {
+				isNav: 0,
+				searchValue: '',
+				navList: [
+					{
+						img: require('@/assets/img/navList/nav1.png'),
+						name: '首页',
+						url: '/index'
+					},
+					{
+						img: require('@/assets/img/navList/nav2.png'),
+						name: '组织介绍',
+						url: '/introduce'
+					},
+					{
+						img: require('@/assets/img/navList/nav3.png'),
+						name: '政策法规',
+						url: '/law'
+					},
+					{
+						img: require('@/assets/img/navList/nav4.png'),
+						name: '核心业务',
+						url: '/business'
+					},
+					{
+						img: require('@/assets/img/navList/nav5.png'),
+						name: '新闻资讯',
+						url: '/news'
+					},
+					{
+						img: require('@/assets/img/navList/nav6.png'),
+						name: '我要参与',
+						url: '/partake'
+					},
+					{
+						img: require('@/assets/img/navList/nav7.png'),
+						name: '联系我们',
+						url: '/contactUs'
+					},
+				],
+				
+			}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			// 搜索
+			search() {
+				if(this.searchValue == '') {
+					this.$message('搜索内容为空');
+				}else {
+					this.$router.push({
+						name: 'searchList',
+						query: {value: this.searchValue}
+					})
+				}
+			},
+			navChoose(index,n) {
+				this.isNav = index
+				this.navTo(n.url)
+			},
+			// 跳转页面
+			navTo(url) {
+				this.$router.push({
+					path: url
+				})
+			},
+		},
+		// 解决刷新导航栏选择返回默认值问题
+		watch: {
+			"$route": function(val) {
+				for (var i = 0; i < this.navList.length; i++) {
+					if (val.path == '/') {
+						this.isNav = 0
+					} else{
+						if (this.navList[i].url == val.path) {
+							this.isNav = i
+						}
+					}
+				}
+			}
+		},
+	}
+</script>
 <style lang="scss">
-	
+	.nowarp {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+	}
+	html, body {
+		scroll-behavior:smooth; 
+		margin: 0;
+	}
+	.bg {
+		position: absolute;
+		top: 0;
+		z-index: -1;
+		img {
+			
+		width: 100%;
+		}
+	}
+	$red: #D82020;
+	.app {
+		font-family: PingFang-SC-Bold;
+		max-width: 1000px;
+		margin: 0 auto;
+		.boxHeader {
+			display: flex;
+			justify-content: space-between;
+			margin: 80px 0;
+			.boxLogo,.boxSearch {
+				margin: auto 0;
+			}
+			.boxLogo {
+				img {
+					width: 300px;
+				}
+			}
+			.boxSearch {
+				position: relative;
+				input {
+					min-width: 200px;
+					border-radius: 20px;
+					border: solid 2px $red;
+					padding: 5px 10px;
+					height: 15px;
+				    outline: none; // 设置点击后无效果
+				}
+				.searchImg {
+					width: 15px;
+					margin: auto 0;
+					position: absolute;
+					top: 7px;
+					right: 10px;
+				}
+			}
+		}
+		.boxNav {
+			background-color: $red;
+			display: flex;
+			justify-content: space-around;
+			margin: 20px 0;
+			.nav {
+				padding: 10px;
+				flex: 1;
+				text-align: center;
+				color: #fff;
+				font-size: 14px;
+				font-family: PingFang-SC-Bold;
+				.navImg {
+					width: 24px;
+					height: 20px;
+					margin: 2px;
+				}
+			}
+			.navC {
+				background-color: #C2191C;
+			}
+		}
+	}
+		.footer {
+			margin-top: 100px;
+			background-color: $red;
+			width: 100%;
+			color: #fff;
+			line-height: 20px;
+			font-size: 14px;
+			padding: 40px 0;
+			text-align: center;
+		}
 </style>

BIN
src/assets/img/box-bg.png


BIN
src/assets/img/index-h.png


BIN
src/assets/img/indexNav/i1.png


BIN
src/assets/img/indexNav/i2.png


BIN
src/assets/img/indexNav/i3.png


BIN
src/assets/img/indexNav/i4.png


BIN
src/assets/img/indexNav/i5.png


BIN
src/assets/img/indexNav/i6.png


BIN
src/assets/img/indexNav/i7.png


BIN
src/assets/img/indexNav/i8.png


BIN
src/assets/img/indexNav/i9.png


BIN
src/assets/img/logo-1.png


BIN
src/assets/img/logo-2.png


BIN
src/assets/img/logo.png


BIN
src/assets/img/navList/nav1.png


BIN
src/assets/img/navList/nav2.png


BIN
src/assets/img/navList/nav3.png


BIN
src/assets/img/navList/nav4.png


BIN
src/assets/img/navList/nav5.png


BIN
src/assets/img/navList/nav6.png


BIN
src/assets/img/navList/nav7.png


BIN
src/assets/img/qrcode.png


BIN
src/assets/img/scanning.png


BIN
src/assets/img/search.png


BIN
src/assets/img/yq1.png


BIN
src/assets/img/yq2.png


BIN
src/assets/img/yq3.png


BIN
src/assets/img/yq4.png


BIN
src/assets/img/yq5.png


+ 683 - 0
src/assets/js/md5.js

@@ -0,0 +1,683 @@
+/**
+ * [js-md5]{@link https://github.com/emn178/js-md5}
+ *
+ * @namespace md5
+ * @version 0.7.3
+ * @author Chen, Yi-Cyuan [emn178@gmail.com]
+ * @copyright Chen, Yi-Cyuan 2014-2017
+ * @license MIT
+ */
+(function () {
+  'use strict';
+
+  var ERROR = 'input is invalid type';
+  var WINDOW = typeof window === 'object';
+  var root = WINDOW ? window : {};
+  if (root.JS_MD5_NO_WINDOW) {
+    WINDOW = false;
+  }
+  var WEB_WORKER = !WINDOW && typeof self === 'object';
+  var NODE_JS = !root.JS_MD5_NO_NODE_JS && typeof process === 'object' && process.versions && process.versions.node;
+  if (NODE_JS) {
+    root = global;
+  } else if (WEB_WORKER) {
+    root = self;
+  }
+  var COMMON_JS = !root.JS_MD5_NO_COMMON_JS && typeof module === 'object' && module.exports;
+  var AMD = typeof define === 'function' && define.amd;
+  var ARRAY_BUFFER = !root.JS_MD5_NO_ARRAY_BUFFER && typeof ArrayBuffer !== 'undefined';
+  var HEX_CHARS = '0123456789abcdef'.split('');
+  var EXTRA = [128, 32768, 8388608, -2147483648];
+  var SHIFT = [0, 8, 16, 24];
+  var OUTPUT_TYPES = ['hex', 'array', 'digest', 'buffer', 'arrayBuffer', 'base64'];
+  var BASE64_ENCODE_CHAR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('');
+
+  var blocks = [], buffer8;
+  if (ARRAY_BUFFER) {
+    var buffer = new ArrayBuffer(68);
+    buffer8 = new Uint8Array(buffer);
+    blocks = new Uint32Array(buffer);
+  }
+
+  if (root.JS_MD5_NO_NODE_JS || !Array.isArray) {
+    Array.isArray = function (obj) {
+      return Object.prototype.toString.call(obj) === '[object Array]';
+    };
+  }
+
+  if (ARRAY_BUFFER && (root.JS_MD5_NO_ARRAY_BUFFER_IS_VIEW || !ArrayBuffer.isView)) {
+    ArrayBuffer.isView = function (obj) {
+      return typeof obj === 'object' && obj.buffer && obj.buffer.constructor === ArrayBuffer;
+    };
+  }
+
+  /**
+   * @method hex
+   * @memberof md5
+   * @description Output hash as hex string
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {String} Hex string
+   * @example
+   * md5.hex('The quick brown fox jumps over the lazy dog');
+   * // equal to
+   * md5('The quick brown fox jumps over the lazy dog');
+   */
+  /**
+   * @method digest
+   * @memberof md5
+   * @description Output hash as bytes array
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {Array} Bytes array
+   * @example
+   * md5.digest('The quick brown fox jumps over the lazy dog');
+   */
+  /**
+   * @method array
+   * @memberof md5
+   * @description Output hash as bytes array
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {Array} Bytes array
+   * @example
+   * md5.array('The quick brown fox jumps over the lazy dog');
+   */
+  /**
+   * @method arrayBuffer
+   * @memberof md5
+   * @description Output hash as ArrayBuffer
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {ArrayBuffer} ArrayBuffer
+   * @example
+   * md5.arrayBuffer('The quick brown fox jumps over the lazy dog');
+   */
+  /**
+   * @method buffer
+   * @deprecated This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
+   * @memberof md5
+   * @description Output hash as ArrayBuffer
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {ArrayBuffer} ArrayBuffer
+   * @example
+   * md5.buffer('The quick brown fox jumps over the lazy dog');
+   */
+  /**
+   * @method base64
+   * @memberof md5
+   * @description Output hash as base64 string
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {String} base64 string
+   * @example
+   * md5.base64('The quick brown fox jumps over the lazy dog');
+   */
+  var createOutputMethod = function (outputType) {
+    return function (message) {
+      return new Md5(true).update(message)[outputType]();
+    };
+  };
+
+  /**
+   * @method create
+   * @memberof md5
+   * @description Create Md5 object
+   * @returns {Md5} Md5 object.
+   * @example
+   * var hash = md5.create();
+   */
+  /**
+   * @method update
+   * @memberof md5
+   * @description Create and update Md5 object
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {Md5} Md5 object.
+   * @example
+   * var hash = md5.update('The quick brown fox jumps over the lazy dog');
+   * // equal to
+   * var hash = md5.create();
+   * hash.update('The quick brown fox jumps over the lazy dog');
+   */
+  var createMethod = function () {
+    var method = createOutputMethod('hex');
+    if (NODE_JS) {
+      method = nodeWrap(method);
+    }
+    method.create = function () {
+      return new Md5();
+    };
+    method.update = function (message) {
+      return method.create().update(message);
+    };
+    for (var i = 0; i < OUTPUT_TYPES.length; ++i) {
+      var type = OUTPUT_TYPES[i];
+      method[type] = createOutputMethod(type);
+    }
+    return method;
+  };
+
+  var nodeWrap = function (method) {
+    var crypto = eval("require('crypto')");
+    var Buffer = eval("require('buffer').Buffer");
+    var nodeMethod = function (message) {
+      if (typeof message === 'string') {
+        return crypto.createHash('md5').update(message, 'utf8').digest('hex');
+      } else {
+        if (message === null || message === undefined) {
+          throw ERROR;
+        } else if (message.constructor === ArrayBuffer) {
+          message = new Uint8Array(message);
+        }
+      }
+      if (Array.isArray(message) || ArrayBuffer.isView(message) ||
+        message.constructor === Buffer) {
+        return crypto.createHash('md5').update(new Buffer(message)).digest('hex');
+      } else {
+        return method(message);
+      }
+    };
+    return nodeMethod;
+  };
+
+  /**
+   * Md5 class
+   * @class Md5
+   * @description This is internal class.
+   * @see {@link md5.create}
+   */
+  function Md5(sharedMemory) {
+    if (sharedMemory) {
+      blocks[0] = blocks[16] = blocks[1] = blocks[2] = blocks[3] =
+      blocks[4] = blocks[5] = blocks[6] = blocks[7] =
+      blocks[8] = blocks[9] = blocks[10] = blocks[11] =
+      blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
+      this.blocks = blocks;
+      this.buffer8 = buffer8;
+    } else {
+      if (ARRAY_BUFFER) {
+        var buffer = new ArrayBuffer(68);
+        this.buffer8 = new Uint8Array(buffer);
+        this.blocks = new Uint32Array(buffer);
+      } else {
+        this.blocks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+      }
+    }
+    this.h0 = this.h1 = this.h2 = this.h3 = this.start = this.bytes = this.hBytes = 0;
+    this.finalized = this.hashed = false;
+    this.first = true;
+  }
+
+  /**
+   * @method update
+   * @memberof Md5
+   * @instance
+   * @description Update hash
+   * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+   * @returns {Md5} Md5 object.
+   * @see {@link md5.update}
+   */
+  Md5.prototype.update = function (message) {
+    if (this.finalized) {
+      return;
+    }
+
+    var notString, type = typeof message;
+    if (type !== 'string') {
+      if (type === 'object') {
+        if (message === null) {
+          throw ERROR;
+        } else if (ARRAY_BUFFER && message.constructor === ArrayBuffer) {
+          message = new Uint8Array(message);
+        } else if (!Array.isArray(message)) {
+          if (!ARRAY_BUFFER || !ArrayBuffer.isView(message)) {
+            throw ERROR;
+          }
+        }
+      } else {
+        throw ERROR;
+      }
+      notString = true;
+    }
+    var code, index = 0, i, length = message.length, blocks = this.blocks;
+    var buffer8 = this.buffer8;
+
+    while (index < length) {
+      if (this.hashed) {
+        this.hashed = false;
+        blocks[0] = blocks[16];
+        blocks[16] = blocks[1] = blocks[2] = blocks[3] =
+        blocks[4] = blocks[5] = blocks[6] = blocks[7] =
+        blocks[8] = blocks[9] = blocks[10] = blocks[11] =
+        blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
+      }
+
+      if (notString) {
+        if (ARRAY_BUFFER) {
+          for (i = this.start; index < length && i < 64; ++index) {
+            buffer8[i++] = message[index];
+          }
+        } else {
+          for (i = this.start; index < length && i < 64; ++index) {
+            blocks[i >> 2] |= message[index] << SHIFT[i++ & 3];
+          }
+        }
+      } else {
+        if (ARRAY_BUFFER) {
+          for (i = this.start; index < length && i < 64; ++index) {
+            code = message.charCodeAt(index);
+            if (code < 0x80) {
+              buffer8[i++] = code;
+            } else if (code < 0x800) {
+              buffer8[i++] = 0xc0 | (code >> 6);
+              buffer8[i++] = 0x80 | (code & 0x3f);
+            } else if (code < 0xd800 || code >= 0xe000) {
+              buffer8[i++] = 0xe0 | (code >> 12);
+              buffer8[i++] = 0x80 | ((code >> 6) & 0x3f);
+              buffer8[i++] = 0x80 | (code & 0x3f);
+            } else {
+              code = 0x10000 + (((code & 0x3ff) << 10) | (message.charCodeAt(++index) & 0x3ff));
+              buffer8[i++] = 0xf0 | (code >> 18);
+              buffer8[i++] = 0x80 | ((code >> 12) & 0x3f);
+              buffer8[i++] = 0x80 | ((code >> 6) & 0x3f);
+              buffer8[i++] = 0x80 | (code & 0x3f);
+            }
+          }
+        } else {
+          for (i = this.start; index < length && i < 64; ++index) {
+            code = message.charCodeAt(index);
+            if (code < 0x80) {
+              blocks[i >> 2] |= code << SHIFT[i++ & 3];
+            } else if (code < 0x800) {
+              blocks[i >> 2] |= (0xc0 | (code >> 6)) << SHIFT[i++ & 3];
+              blocks[i >> 2] |= (0x80 | (code & 0x3f)) << SHIFT[i++ & 3];
+            } else if (code < 0xd800 || code >= 0xe000) {
+              blocks[i >> 2] |= (0xe0 | (code >> 12)) << SHIFT[i++ & 3];
+              blocks[i >> 2] |= (0x80 | ((code >> 6) & 0x3f)) << SHIFT[i++ & 3];
+              blocks[i >> 2] |= (0x80 | (code & 0x3f)) << SHIFT[i++ & 3];
+            } else {
+              code = 0x10000 + (((code & 0x3ff) << 10) | (message.charCodeAt(++index) & 0x3ff));
+              blocks[i >> 2] |= (0xf0 | (code >> 18)) << SHIFT[i++ & 3];
+              blocks[i >> 2] |= (0x80 | ((code >> 12) & 0x3f)) << SHIFT[i++ & 3];
+              blocks[i >> 2] |= (0x80 | ((code >> 6) & 0x3f)) << SHIFT[i++ & 3];
+              blocks[i >> 2] |= (0x80 | (code & 0x3f)) << SHIFT[i++ & 3];
+            }
+          }
+        }
+      }
+      this.lastByteIndex = i;
+      this.bytes += i - this.start;
+      if (i >= 64) {
+        this.start = i - 64;
+        this.hash();
+        this.hashed = true;
+      } else {
+        this.start = i;
+      }
+    }
+    if (this.bytes > 4294967295) {
+      this.hBytes += this.bytes / 4294967296 << 0;
+      this.bytes = this.bytes % 4294967296;
+    }
+    return this;
+  };
+
+  Md5.prototype.finalize = function () {
+    if (this.finalized) {
+      return;
+    }
+    this.finalized = true;
+    var blocks = this.blocks, i = this.lastByteIndex;
+    blocks[i >> 2] |= EXTRA[i & 3];
+    if (i >= 56) {
+      if (!this.hashed) {
+        this.hash();
+      }
+      blocks[0] = blocks[16];
+      blocks[16] = blocks[1] = blocks[2] = blocks[3] =
+      blocks[4] = blocks[5] = blocks[6] = blocks[7] =
+      blocks[8] = blocks[9] = blocks[10] = blocks[11] =
+      blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
+    }
+    blocks[14] = this.bytes << 3;
+    blocks[15] = this.hBytes << 3 | this.bytes >>> 29;
+    this.hash();
+  };
+
+  Md5.prototype.hash = function () {
+    var a, b, c, d, bc, da, blocks = this.blocks;
+
+    if (this.first) {
+      a = blocks[0] - 680876937;
+      a = (a << 7 | a >>> 25) - 271733879 << 0;
+      d = (-1732584194 ^ a & 2004318071) + blocks[1] - 117830708;
+      d = (d << 12 | d >>> 20) + a << 0;
+      c = (-271733879 ^ (d & (a ^ -271733879))) + blocks[2] - 1126478375;
+      c = (c << 17 | c >>> 15) + d << 0;
+      b = (a ^ (c & (d ^ a))) + blocks[3] - 1316259209;
+      b = (b << 22 | b >>> 10) + c << 0;
+    } else {
+      a = this.h0;
+      b = this.h1;
+      c = this.h2;
+      d = this.h3;
+      a += (d ^ (b & (c ^ d))) + blocks[0] - 680876936;
+      a = (a << 7 | a >>> 25) + b << 0;
+      d += (c ^ (a & (b ^ c))) + blocks[1] - 389564586;
+      d = (d << 12 | d >>> 20) + a << 0;
+      c += (b ^ (d & (a ^ b))) + blocks[2] + 606105819;
+      c = (c << 17 | c >>> 15) + d << 0;
+      b += (a ^ (c & (d ^ a))) + blocks[3] - 1044525330;
+      b = (b << 22 | b >>> 10) + c << 0;
+    }
+
+    a += (d ^ (b & (c ^ d))) + blocks[4] - 176418897;
+    a = (a << 7 | a >>> 25) + b << 0;
+    d += (c ^ (a & (b ^ c))) + blocks[5] + 1200080426;
+    d = (d << 12 | d >>> 20) + a << 0;
+    c += (b ^ (d & (a ^ b))) + blocks[6] - 1473231341;
+    c = (c << 17 | c >>> 15) + d << 0;
+    b += (a ^ (c & (d ^ a))) + blocks[7] - 45705983;
+    b = (b << 22 | b >>> 10) + c << 0;
+    a += (d ^ (b & (c ^ d))) + blocks[8] + 1770035416;
+    a = (a << 7 | a >>> 25) + b << 0;
+    d += (c ^ (a & (b ^ c))) + blocks[9] - 1958414417;
+    d = (d << 12 | d >>> 20) + a << 0;
+    c += (b ^ (d & (a ^ b))) + blocks[10] - 42063;
+    c = (c << 17 | c >>> 15) + d << 0;
+    b += (a ^ (c & (d ^ a))) + blocks[11] - 1990404162;
+    b = (b << 22 | b >>> 10) + c << 0;
+    a += (d ^ (b & (c ^ d))) + blocks[12] + 1804603682;
+    a = (a << 7 | a >>> 25) + b << 0;
+    d += (c ^ (a & (b ^ c))) + blocks[13] - 40341101;
+    d = (d << 12 | d >>> 20) + a << 0;
+    c += (b ^ (d & (a ^ b))) + blocks[14] - 1502002290;
+    c = (c << 17 | c >>> 15) + d << 0;
+    b += (a ^ (c & (d ^ a))) + blocks[15] + 1236535329;
+    b = (b << 22 | b >>> 10) + c << 0;
+    a += (c ^ (d & (b ^ c))) + blocks[1] - 165796510;
+    a = (a << 5 | a >>> 27) + b << 0;
+    d += (b ^ (c & (a ^ b))) + blocks[6] - 1069501632;
+    d = (d << 9 | d >>> 23) + a << 0;
+    c += (a ^ (b & (d ^ a))) + blocks[11] + 643717713;
+    c = (c << 14 | c >>> 18) + d << 0;
+    b += (d ^ (a & (c ^ d))) + blocks[0] - 373897302;
+    b = (b << 20 | b >>> 12) + c << 0;
+    a += (c ^ (d & (b ^ c))) + blocks[5] - 701558691;
+    a = (a << 5 | a >>> 27) + b << 0;
+    d += (b ^ (c & (a ^ b))) + blocks[10] + 38016083;
+    d = (d << 9 | d >>> 23) + a << 0;
+    c += (a ^ (b & (d ^ a))) + blocks[15] - 660478335;
+    c = (c << 14 | c >>> 18) + d << 0;
+    b += (d ^ (a & (c ^ d))) + blocks[4] - 405537848;
+    b = (b << 20 | b >>> 12) + c << 0;
+    a += (c ^ (d & (b ^ c))) + blocks[9] + 568446438;
+    a = (a << 5 | a >>> 27) + b << 0;
+    d += (b ^ (c & (a ^ b))) + blocks[14] - 1019803690;
+    d = (d << 9 | d >>> 23) + a << 0;
+    c += (a ^ (b & (d ^ a))) + blocks[3] - 187363961;
+    c = (c << 14 | c >>> 18) + d << 0;
+    b += (d ^ (a & (c ^ d))) + blocks[8] + 1163531501;
+    b = (b << 20 | b >>> 12) + c << 0;
+    a += (c ^ (d & (b ^ c))) + blocks[13] - 1444681467;
+    a = (a << 5 | a >>> 27) + b << 0;
+    d += (b ^ (c & (a ^ b))) + blocks[2] - 51403784;
+    d = (d << 9 | d >>> 23) + a << 0;
+    c += (a ^ (b & (d ^ a))) + blocks[7] + 1735328473;
+    c = (c << 14 | c >>> 18) + d << 0;
+    b += (d ^ (a & (c ^ d))) + blocks[12] - 1926607734;
+    b = (b << 20 | b >>> 12) + c << 0;
+    bc = b ^ c;
+    a += (bc ^ d) + blocks[5] - 378558;
+    a = (a << 4 | a >>> 28) + b << 0;
+    d += (bc ^ a) + blocks[8] - 2022574463;
+    d = (d << 11 | d >>> 21) + a << 0;
+    da = d ^ a;
+    c += (da ^ b) + blocks[11] + 1839030562;
+    c = (c << 16 | c >>> 16) + d << 0;
+    b += (da ^ c) + blocks[14] - 35309556;
+    b = (b << 23 | b >>> 9) + c << 0;
+    bc = b ^ c;
+    a += (bc ^ d) + blocks[1] - 1530992060;
+    a = (a << 4 | a >>> 28) + b << 0;
+    d += (bc ^ a) + blocks[4] + 1272893353;
+    d = (d << 11 | d >>> 21) + a << 0;
+    da = d ^ a;
+    c += (da ^ b) + blocks[7] - 155497632;
+    c = (c << 16 | c >>> 16) + d << 0;
+    b += (da ^ c) + blocks[10] - 1094730640;
+    b = (b << 23 | b >>> 9) + c << 0;
+    bc = b ^ c;
+    a += (bc ^ d) + blocks[13] + 681279174;
+    a = (a << 4 | a >>> 28) + b << 0;
+    d += (bc ^ a) + blocks[0] - 358537222;
+    d = (d << 11 | d >>> 21) + a << 0;
+    da = d ^ a;
+    c += (da ^ b) + blocks[3] - 722521979;
+    c = (c << 16 | c >>> 16) + d << 0;
+    b += (da ^ c) + blocks[6] + 76029189;
+    b = (b << 23 | b >>> 9) + c << 0;
+    bc = b ^ c;
+    a += (bc ^ d) + blocks[9] - 640364487;
+    a = (a << 4 | a >>> 28) + b << 0;
+    d += (bc ^ a) + blocks[12] - 421815835;
+    d = (d << 11 | d >>> 21) + a << 0;
+    da = d ^ a;
+    c += (da ^ b) + blocks[15] + 530742520;
+    c = (c << 16 | c >>> 16) + d << 0;
+    b += (da ^ c) + blocks[2] - 995338651;
+    b = (b << 23 | b >>> 9) + c << 0;
+    a += (c ^ (b | ~d)) + blocks[0] - 198630844;
+    a = (a << 6 | a >>> 26) + b << 0;
+    d += (b ^ (a | ~c)) + blocks[7] + 1126891415;
+    d = (d << 10 | d >>> 22) + a << 0;
+    c += (a ^ (d | ~b)) + blocks[14] - 1416354905;
+    c = (c << 15 | c >>> 17) + d << 0;
+    b += (d ^ (c | ~a)) + blocks[5] - 57434055;
+    b = (b << 21 | b >>> 11) + c << 0;
+    a += (c ^ (b | ~d)) + blocks[12] + 1700485571;
+    a = (a << 6 | a >>> 26) + b << 0;
+    d += (b ^ (a | ~c)) + blocks[3] - 1894986606;
+    d = (d << 10 | d >>> 22) + a << 0;
+    c += (a ^ (d | ~b)) + blocks[10] - 1051523;
+    c = (c << 15 | c >>> 17) + d << 0;
+    b += (d ^ (c | ~a)) + blocks[1] - 2054922799;
+    b = (b << 21 | b >>> 11) + c << 0;
+    a += (c ^ (b | ~d)) + blocks[8] + 1873313359;
+    a = (a << 6 | a >>> 26) + b << 0;
+    d += (b ^ (a | ~c)) + blocks[15] - 30611744;
+    d = (d << 10 | d >>> 22) + a << 0;
+    c += (a ^ (d | ~b)) + blocks[6] - 1560198380;
+    c = (c << 15 | c >>> 17) + d << 0;
+    b += (d ^ (c | ~a)) + blocks[13] + 1309151649;
+    b = (b << 21 | b >>> 11) + c << 0;
+    a += (c ^ (b | ~d)) + blocks[4] - 145523070;
+    a = (a << 6 | a >>> 26) + b << 0;
+    d += (b ^ (a | ~c)) + blocks[11] - 1120210379;
+    d = (d << 10 | d >>> 22) + a << 0;
+    c += (a ^ (d | ~b)) + blocks[2] + 718787259;
+    c = (c << 15 | c >>> 17) + d << 0;
+    b += (d ^ (c | ~a)) + blocks[9] - 343485551;
+    b = (b << 21 | b >>> 11) + c << 0;
+
+    if (this.first) {
+      this.h0 = a + 1732584193 << 0;
+      this.h1 = b - 271733879 << 0;
+      this.h2 = c - 1732584194 << 0;
+      this.h3 = d + 271733878 << 0;
+      this.first = false;
+    } else {
+      this.h0 = this.h0 + a << 0;
+      this.h1 = this.h1 + b << 0;
+      this.h2 = this.h2 + c << 0;
+      this.h3 = this.h3 + d << 0;
+    }
+  };
+
+  /**
+   * @method hex
+   * @memberof Md5
+   * @instance
+   * @description Output hash as hex string
+   * @returns {String} Hex string
+   * @see {@link md5.hex}
+   * @example
+   * hash.hex();
+   */
+  Md5.prototype.hex = function () {
+    this.finalize();
+
+    var h0 = this.h0, h1 = this.h1, h2 = this.h2, h3 = this.h3;
+
+    return HEX_CHARS[(h0 >> 4) & 0x0F] + HEX_CHARS[h0 & 0x0F] +
+      HEX_CHARS[(h0 >> 12) & 0x0F] + HEX_CHARS[(h0 >> 8) & 0x0F] +
+      HEX_CHARS[(h0 >> 20) & 0x0F] + HEX_CHARS[(h0 >> 16) & 0x0F] +
+      HEX_CHARS[(h0 >> 28) & 0x0F] + HEX_CHARS[(h0 >> 24) & 0x0F] +
+      HEX_CHARS[(h1 >> 4) & 0x0F] + HEX_CHARS[h1 & 0x0F] +
+      HEX_CHARS[(h1 >> 12) & 0x0F] + HEX_CHARS[(h1 >> 8) & 0x0F] +
+      HEX_CHARS[(h1 >> 20) & 0x0F] + HEX_CHARS[(h1 >> 16) & 0x0F] +
+      HEX_CHARS[(h1 >> 28) & 0x0F] + HEX_CHARS[(h1 >> 24) & 0x0F] +
+      HEX_CHARS[(h2 >> 4) & 0x0F] + HEX_CHARS[h2 & 0x0F] +
+      HEX_CHARS[(h2 >> 12) & 0x0F] + HEX_CHARS[(h2 >> 8) & 0x0F] +
+      HEX_CHARS[(h2 >> 20) & 0x0F] + HEX_CHARS[(h2 >> 16) & 0x0F] +
+      HEX_CHARS[(h2 >> 28) & 0x0F] + HEX_CHARS[(h2 >> 24) & 0x0F] +
+      HEX_CHARS[(h3 >> 4) & 0x0F] + HEX_CHARS[h3 & 0x0F] +
+      HEX_CHARS[(h3 >> 12) & 0x0F] + HEX_CHARS[(h3 >> 8) & 0x0F] +
+      HEX_CHARS[(h3 >> 20) & 0x0F] + HEX_CHARS[(h3 >> 16) & 0x0F] +
+      HEX_CHARS[(h3 >> 28) & 0x0F] + HEX_CHARS[(h3 >> 24) & 0x0F];
+  };
+
+  /**
+   * @method toString
+   * @memberof Md5
+   * @instance
+   * @description Output hash as hex string
+   * @returns {String} Hex string
+   * @see {@link md5.hex}
+   * @example
+   * hash.toString();
+   */
+  Md5.prototype.toString = Md5.prototype.hex;
+
+  /**
+   * @method digest
+   * @memberof Md5
+   * @instance
+   * @description Output hash as bytes array
+   * @returns {Array} Bytes array
+   * @see {@link md5.digest}
+   * @example
+   * hash.digest();
+   */
+  Md5.prototype.digest = function () {
+    this.finalize();
+
+    var h0 = this.h0, h1 = this.h1, h2 = this.h2, h3 = this.h3;
+    return [
+      h0 & 0xFF, (h0 >> 8) & 0xFF, (h0 >> 16) & 0xFF, (h0 >> 24) & 0xFF,
+      h1 & 0xFF, (h1 >> 8) & 0xFF, (h1 >> 16) & 0xFF, (h1 >> 24) & 0xFF,
+      h2 & 0xFF, (h2 >> 8) & 0xFF, (h2 >> 16) & 0xFF, (h2 >> 24) & 0xFF,
+      h3 & 0xFF, (h3 >> 8) & 0xFF, (h3 >> 16) & 0xFF, (h3 >> 24) & 0xFF
+    ];
+  };
+
+  /**
+   * @method array
+   * @memberof Md5
+   * @instance
+   * @description Output hash as bytes array
+   * @returns {Array} Bytes array
+   * @see {@link md5.array}
+   * @example
+   * hash.array();
+   */
+  Md5.prototype.array = Md5.prototype.digest;
+
+  /**
+   * @method arrayBuffer
+   * @memberof Md5
+   * @instance
+   * @description Output hash as ArrayBuffer
+   * @returns {ArrayBuffer} ArrayBuffer
+   * @see {@link md5.arrayBuffer}
+   * @example
+   * hash.arrayBuffer();
+   */
+  Md5.prototype.arrayBuffer = function () {
+    this.finalize();
+
+    var buffer = new ArrayBuffer(16);
+    var blocks = new Uint32Array(buffer);
+    blocks[0] = this.h0;
+    blocks[1] = this.h1;
+    blocks[2] = this.h2;
+    blocks[3] = this.h3;
+    return buffer;
+  };
+
+  /**
+   * @method buffer
+   * @deprecated This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
+   * @memberof Md5
+   * @instance
+   * @description Output hash as ArrayBuffer
+   * @returns {ArrayBuffer} ArrayBuffer
+   * @see {@link md5.buffer}
+   * @example
+   * hash.buffer();
+   */
+  Md5.prototype.buffer = Md5.prototype.arrayBuffer;
+
+  /**
+   * @method base64
+   * @memberof Md5
+   * @instance
+   * @description Output hash as base64 string
+   * @returns {String} base64 string
+   * @see {@link md5.base64}
+   * @example
+   * hash.base64();
+   */
+  Md5.prototype.base64 = function () {
+    var v1, v2, v3, base64Str = '', bytes = this.array();
+    for (var i = 0; i < 15;) {
+      v1 = bytes[i++];
+      v2 = bytes[i++];
+      v3 = bytes[i++];
+      base64Str += BASE64_ENCODE_CHAR[v1 >>> 2] +
+        BASE64_ENCODE_CHAR[(v1 << 4 | v2 >>> 4) & 63] +
+        BASE64_ENCODE_CHAR[(v2 << 2 | v3 >>> 6) & 63] +
+        BASE64_ENCODE_CHAR[v3 & 63];
+    }
+    v1 = bytes[i];
+    base64Str += BASE64_ENCODE_CHAR[v1 >>> 2] +
+      BASE64_ENCODE_CHAR[(v1 << 4) & 63] +
+      '==';
+    return base64Str;
+  };
+
+  var exports = createMethod();
+
+  if (COMMON_JS) {
+    module.exports = exports;
+  } else {
+    /**
+     * @method md5
+     * @description Md5 hash function, export to global in browsers.
+     * @param {String|Array|Uint8Array|ArrayBuffer} message message to hash
+     * @returns {String} md5 hashes
+     * @example
+     * md5(''); // d41d8cd98f00b204e9800998ecf8427e
+     * md5('The quick brown fox jumps over the lazy dog'); // 9e107d9d372bb6826bd81d3542a419d6
+     * md5('The quick brown fox jumps over the lazy dog.'); // e4d909c290d0fb1ca068ffaddf22cbd0
+     *
+     * // It also supports UTF-8 encoding
+     * md5('中文'); // a7bac2239fcdcb3a067903d8077c4a07
+     *
+     * // It also supports byte `Array`, `Uint8Array`, `ArrayBuffer`
+     * md5([]); // d41d8cd98f00b204e9800998ecf8427e
+     * md5(new Uint8Array([])); // d41d8cd98f00b204e9800998ecf8427e
+     */
+    root.md5 = exports;
+    if (AMD) {
+      define(function () {
+        return exports;
+      });
+    }
+  }
+})();

+ 51 - 0
src/assets/js/sha1.js

@@ -0,0 +1,51 @@
+function encodeUTF8(s) {
+  var i, r = [], c, x;
+  for (i = 0; i < s.length; i++)
+    if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
+    else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
+    else {
+      if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
+        c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
+          r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
+      else r.push(0xE0 + (c >> 12 & 0xF));
+      r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
+    };
+  return r;
+}
+
+// 字符串加密成 hex 字符串
+function sha1(s) {
+  var data = new Uint8Array(encodeUTF8(s))
+  var i, j, t;
+  var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
+  s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
+  for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
+  s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
+  s[l - 1] = data.length << 3;
+  var w = [], f = [
+    function () { return m[1] & m[2] | ~m[1] & m[3]; },
+    function () { return m[1] ^ m[2] ^ m[3]; },
+    function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
+    function () { return m[1] ^ m[2] ^ m[3]; }
+  ], rol = function (n, c) { return n << c | n >>> (32 - c); },
+    k = [1518500249, 1859775393, -1894007588, -899497514],
+    m = [1732584193, -271733879, null, null, -1009589776];
+  m[2] = ~m[0], m[3] = ~m[1];
+  for (i = 0; i < s.length; i += 16) {
+    var o = m.slice(0);
+    for (j = 0; j < 80; j++)
+      w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
+        t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
+        m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
+    for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
+  };
+  t = new DataView(new Uint32Array(m).buffer);
+  for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);
+
+  var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
+    return (e < 16 ? "0" : "") + e.toString(16);
+  }).join("");
+  return hex;
+}
+
+export default sha1

+ 0 - 59
src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

+ 28 - 0
src/components/article.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="article">
+		<div class="title">
+			{{ data.title }}jiushiosdjfa
+		</div>
+		<div class="content">
+			{{ data.content }}ssdfa
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: ['data']
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.article {
+	padding: 40px 20px;
+	.title {
+		color: $red;
+		text-align: center;
+	}
+}
+	
+</style>

+ 343 - 0
src/components/box.vue

@@ -0,0 +1,343 @@
+<template>
+	<div class="contact">
+		<div class="navlist" v-show="navList" v-if="isShownav">
+			<div class="nav" v-for="(n,index) in navList.list" :class="{navC: index ==  navChoose}" @click="navC(index,n)">
+				<div class="title" :title="n.title">
+					{{ n.title }}
+				</div>
+				<div class="">
+					>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="head nawarp" v-if="isShowHeader">
+				当前位置:
+				<div @click="urlTo('index')">首页</div> 
+				> <div @click="listBack">
+				{{ navList.title }}
+				> {{ navList.list[navChoose].title }}</div>
+				<span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
+			</div>
+			<div class="head" v-else>
+				当前位置:<div @click="urlTo('index')">首页</div> 
+				> <div @click="listBack">{{ navList.title }}</div>
+				<span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
+			</div>
+			<slot v-if="navChoose == 0 && !isShowSon"></slot>
+			<div class="contentbox">
+				<div class="content">
+					<div class="load" v-show="loadingType == 'loadmore'">
+						----- 加载中 -----
+					</div>
+					<div v-html="content" v-show="isShowSon">
+						
+					</div>
+					
+					<div class="contentList chooseitem" v-show="!isShowSon">
+						<div class="item" v-for="c in contentList" @click="listChoose(c)">
+							<div class="title nawarp">
+								{{ c.title }}
+							</div>
+							<div class="time">
+								 {{ getTime(c.releasetime) }}
+							</div>
+						</div>
+						
+						<div class="pagec" v-if="sum != 0">
+							<div class="fristPage" @click="page = 1">
+								第一页
+							</div>
+							<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+							:class="{isChoose:count == page}">
+								{{ count }}
+							</div>
+							<div class="nextPage" @click='nextPage'>
+								下一页
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			
+			
+		</div>
+	</div>
+</template>
+
+<script>
+
+import { details,getArticList } from '@/request/api.js'
+	export default {
+		props: ['navList'],
+		data() {
+			return {
+				page: 1,
+				limit: 10,
+				sum: 0,
+				path: this.$route.path,
+				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
+				timeOut: '',// 不断获取初始显示数据直至显示
+				content: '', // 文章
+				contentList: [], // 二级列表
+				contentId: this.$route.params.contentId || this.$route.query.contentId || 0,
+				isShowSon: true,
+				pageId: 0,
+				loadingType: 'loadmore',
+			}
+		},
+		mounted() {
+			if(this.isShowContent) {
+				this.init()
+			}
+		},
+		methods: {
+			// 初始化
+			init() {
+				this.navC(this.navChoose,this.navList.list[this.navChoose])
+			},
+			navC(index,data) {
+				this.loadingType = 'loadmore'
+				this.page = 1
+				this.isShowSon = true
+				this.content = ''
+				this.contentList = []
+				this.pageId = data.id
+				this.getlistslist()
+				this.navChoose = index
+				this.$emit('navListC',index)
+			},
+			listChoose(data) {
+				this.loadingType = 'loadmore'
+				this.isShowSon = true
+				this.contentId = data.id
+				this.getData()
+			},
+			getData() {
+				details({},this.contentId).then(({data}) => {
+					if (data.url == '') {
+						this.content = data.content
+						this.contentId = 0
+					} else{
+						this.originalText(data.url)
+						this.contentId = 0
+						this.isShowSon = false
+					}
+					this.loadingType = 'nomore'
+				})
+			},
+			getlistslist() {
+				getArticList({},this.pageId,this.page,this.limit).then(res => {
+					this.sum = res.data.count
+					if(res.data.count > 0) {
+						if(res.data.count == 1 ) {
+							this.isShowSon = true
+							this.contentId = res.data.list[0].id
+							this.getData()
+						}else if(this.contentId != 0) {
+							this.isShowSon = true
+							this.getData()
+						}else if(res.data.count > 1) {
+							this.isShowSon = false
+							this.loadingType = 'nomore'
+						}
+						this.contentList = res.data.list
+						
+						
+					}else {
+						this.loadingType = 'nomore'
+					}
+				})
+			},
+			pageChoose(page) {
+				this.page = page
+			},
+			listBack() {
+				this.loadingType = 'nomore'
+				this.content = ''
+				this.isShowSon = false
+			},
+			
+			// 下一页
+			nextPage() {
+				this.page++ 
+				if (this.page > this.totalPage) {
+					this.page = this.totalPage
+				}
+			},
+			// 跳转页面
+			urlTo(name,navChoose) {
+				this.$router.push({
+					name: name
+				})
+			},
+			getTime(time) {
+				return time.substring(0,10)
+			},
+			// 查看原文
+			originalText(url) {
+				window.open(url)
+			}
+		},
+		computed: {
+			// 总页数
+			totalPage() {
+				return Math.ceil(this.sum/this.limit)
+			},
+			isShownav() {
+				return !(!this.navList.list)
+			},
+			isShowHeader() {
+				if(this.isShownav) {
+					if (this.navList.list.length > 1) {
+						return true
+					} else{
+						return false
+					}
+				}
+			},
+			isShowContent() {
+				if (!this.navList.list) {
+					return false
+				} else{
+					return this.navList.list.length > 0
+				}
+			},
+		},
+		watch: {
+			isShowContent() {
+				if(this.isShowContent) {
+					this.init()
+				}
+			},
+			page() {
+				this.getlistslist()
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+	.contact {
+		display: flex;
+		height: 100%;
+		.navlist,.right {
+			box-shadow: 1px 1px 6px #e1e1e1;
+			height: 100%;
+		}
+		.navlist {
+			flex: 2;
+			margin-right: 20px;
+			.title {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+			}
+		}
+		.nav {
+			background-color: #fff;
+			display: flex;
+			justify-content: space-between;
+			padding: 10px 20px;
+		}
+		.navC {
+			background-color: #F7DFDF;
+			color: $red;
+		}
+		.right {
+			flex: 7;
+			.head, {
+				padding: 10px 20px;
+			}
+			.contentbox {
+				overflow: hidden;
+				height: 800px;
+				
+			}
+			.content::-webkit-scrollbar {
+				display: none;
+				position: relative;
+			}
+			.content {
+					position: relative;
+				height: 800px;
+				overflow: auto;
+				padding: 0 10px;
+				background-color: #fff;
+				.original {
+					position: absolute;
+					color: $red;
+					top: 10px;
+					left: 20px;
+				}
+			}
+			.head {
+				background-color: #F2F2F2;
+				display: flex;
+			}
+		}
+	}
+	// 加载中
+	.load {
+		text-align: center;
+		margin: 20px 0;
+	}
+	.contentList {
+		.item {
+			text-overflow:ellipsis;
+			line-height: 40px;
+			height: 40px;
+			display: flex;
+			justify-content: space-between;
+			color: #3e3e3e;
+			border-bottom: solid 1px #F2F2F2;
+				overflow: hidden;
+			.title {
+				width: calc(100% - 120px);
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+			}
+			.time {
+				min-width: 100px;
+			}
+		}
+	}
+	.chooseitem  {
+		color: #999999;		
+	}
+	.chooseitem :hover {
+		color: #d8272a;		
+	}
+	.pagec {
+		color: #333333;
+		display: flex;
+		float: right;
+		margin: 20px 30px;
+		.fristPage,.pageNum,.nextPage {
+			margin-left: 3px;
+			border: solid 1px #F2F2F2;
+			line-height: 30px;
+			text-align: center;
+			color: #333;
+		}
+		.fristPage,.nextPage {
+			padding: 0 10px;
+		}
+		.pageNum {
+			width: 30px;
+			height: 30px;
+		}
+		.isChoose {
+			background-color: $red;
+			color: #fff;
+		}
+	}
+	.pagec :hover {
+		color: $red;
+	}
+</style>

+ 84 - 0
src/components/slideLaR.vue

@@ -0,0 +1,84 @@
+<template>
+	<div class="slideLaR" ref="box">
+		<div class="list" 
+		@mouseover="mouseOver"
+		@mouseleave="mouseLeave"
+		:style="{'margin-left': -marginLeft+'px'}">
+			<span class="listBox" id="detial">
+				<slot></slot><slot></slot>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				marginLeft: 0,
+				listWidth: 0,
+				timeOut: '',
+				boxWidth: 0
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.automatic()
+			},
+			getslot() {
+				this.listWidth = document.getElementById("detial").offsetWidth/2
+				this.boxWidth = this.$refs.box.offsetWidth
+			},
+			// 自动滑动
+			automatic() {
+				this.timeOut = setInterval(() => {
+					if(this.listWidth == 0) {
+						this.getslot()
+					}else {
+						this.marginLeft++
+					}
+					
+				},30)
+			},
+			// 移入
+			mouseOver() {
+				clearTimeout(this.timeOut)
+			},
+			// 移出
+			mouseLeave() {
+				this.init()
+			}
+		},
+		computed: {
+			isEnough() {
+				return this.listWidth > this.boxWidth
+			}
+		},
+		watch: {
+			marginLeft() {
+				if(this.listWidth - this.marginLeft <= 0) {
+					this.marginLeft = 0
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.slideLaR {
+		width: 100%;
+		overflow: hidden;
+		.list {
+			height: 100%;
+			flex-wrap: nowrap;
+			overflow: auto;
+			display: flex;
+			.listBox {
+				display: flex;
+			}
+		}
+	}
+</style>

+ 74 - 0
src/components/slideUpd.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="slideUpd" ref="boxH">
+		<div class="list" 
+		@mouseover="mouseOver"
+		@mouseleave="mouseLeave"
+		:style="{'margin-top': -marginTop+'px'}">
+			<div class="listBox" id="listBoxH">
+				<slot></slot><slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				marginTop: 0,
+				listHeight: 0,
+				timeOut: '',
+				boxHeight: 0
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.automatic()
+			},
+			getslot() {
+				this.listHeight = document.getElementById("listBoxH").clientHeight/2
+				this.boxHeight = this.$refs.boxH.clientHeight
+			},
+			// 自动滑动
+			automatic() {
+				this.timeOut = setInterval(() => {
+					if(this.listHeight == 0) {
+						this.getslot()
+					}else {
+						this.marginTop++
+					}
+					
+				},60)
+			},
+			// 移入
+			mouseOver() {
+				clearTimeout(this.timeOut)
+			},
+			// 移出
+			mouseLeave() {
+				this.init()
+			}
+		},
+		watch: {
+			marginTop() {
+				if(this.listHeight - this.marginTop <= 0) {
+					this.marginTop = 0
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.slideUpd {
+		Height: 100%;
+		overflow: hidden;
+		.list {
+			.listBox {
+			}
+		}
+	}
+</style>

+ 6 - 1
src/main.js

@@ -2,11 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import VueTouch from 'vue-touch'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
-Vue.config.productionTip = false
+
+Vue.use(ElementUI);
 
 new Vue({
   router,
   store,
+  VueTouch,
   render: h => h(App)
 }).$mount('#app')

+ 64 - 0
src/request/api.js

@@ -0,0 +1,64 @@
+import request from "./request.js"
+
+
+// 文章详情
+export function details(data,id) {
+	return request({
+		url: '/api/Article/view?id='+id,
+		method: 'get',
+		data
+	});
+}
+
+// 获取文章列表
+export function getArticList(data,id,page,limit) {
+	return request({
+		url: '/api/Article/lst?ifyid='+id+'&page='+page+'&limit='+limit,
+		method: 'get',
+		data
+	});
+}
+
+// 获取分类
+export function getList(data,id) {
+	return request({
+		url: '/api/Article/ify?pid='+id,
+		method: 'get',
+		data
+	});
+}
+
+// 爱心榜
+export function getlaveList(data,page,limit) {
+	return request({
+		url: '/api/lave/lst&page='+page+'&limit='+limit,
+		method: 'get',
+		data
+	});
+}
+
+// 志愿者
+export function getvolunteerList(data) {
+	return request({
+		url: '/api/lave/lst',
+		method: 'get',
+		data
+	});
+}
+
+// 搜索
+export function getSearch(data,value,page,limit) {
+	return request({
+		url: '/api/Article/lst?ifyid=0&key='+value+'&page='+page+'&limit='+limit,
+		method: 'get',
+		data
+	});
+}
+// 志愿者搜索
+export function getvSearch(data,value,page,limit) {
+	return request({
+		url: '/api/Article/lst?ifyid=21&key='+value+'&page='+page+'&limit='+limit,
+		method: 'get',
+		data
+	});
+}

+ 105 - 0
src/request/request.js

@@ -0,0 +1,105 @@
+import axios from 'axios'
+import router from '../router/index.js'
+import md5 from '../assets/js/md5.js'
+import sha1 from '../assets/js/sha1.js'
+// import {
+// 	MessageBox,
+// 	Toast
+// } from 'mint-ui'
+import {
+	Message
+} from 'element-ui'
+import store from '../store/index.js'
+// create an axios instance
+const service = axios.create({
+	baseURL: store.state.www, // url = base url + request url
+	// withCredentials: true, // send cookies when cross-domain requests
+	timeout: 5000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+	config => {
+		// do something before request is sent
+		// let each request carry token
+		// ['X-Token'] is a custom headers key
+		// please modify it according to the actual situation
+		// config.headers['X-Token'] = getToken()
+		// if(config.method=='get'){
+		// 	if(!config.params){
+		// 		config.params={};
+		// 	}
+		// 	config.params.token = getToken();
+		// }
+		// if(config.method=='post'){
+		// 	config.data.token = getToken();
+		// }
+		let token = localStorage.getItem("token") || ''
+		let sign_time = new Date().getTime()
+		let sys_appid = 'os_jm0001xxxx'
+		let sys_appsecret = 'dsfsfdsfsdfsdfsdffw2fdg'
+		let sys_token = md5(md5(sys_appid + sys_appsecret) + sign_time + sha1(sys_appsecret + sign_time))
+		if(!config.headers) {
+			config.headers = {
+				"sys-appid": sys_appid,
+				"sign-time": sign_time,
+				"sys-token": sys_token,
+				"token": token
+			}
+		}else {
+			config.headers['sys-appid'] = sys_appid
+			config.headers['sign-time'] = sign_time
+			config.headers['sys-token'] = sys_token
+			config.headers['token'] = token
+		}
+		return config
+	},
+	error => {
+		// do something with request error
+		console.log(error) // for debug
+		return Promise.reject(error)
+	}
+)
+
+service.interceptors.response.use(
+	response => {
+		const res = response.data
+		// 解析字符串为数字
+		res.errcode = parseInt(res.status);
+		res.message = res.msg;
+		// console.log(typeof res.errcode);
+		// if (res.errcode !== 200) {
+		// 	// if (res.errcode === 1001) {
+		// 	// 	if (res.message.includes('您已经登录') || res.message.includes('您已经注册')) {
+		// 	// 		router.push('/');
+		// 	// 	}
+		// 	// };
+		// 	if (res.errcode === 2000) {
+		// 			let url = res.data.wxurl + '?url=' + encodeURIComponent(window.location.href);
+		// 			window.location.href = url;
+		// 	} else if (res.errcode === 2002) {
+		// 			router.push("/login");
+		// 	} else {
+		// 		// Toast({
+		// 		// 	message: res.message || 'Error',
+		// 		// 	duration: 1 * 1000
+		// 		// })
+		// 		// this.$message.error('错了哦,这是一条错误消息');
+		// 		Message.error(res.message || 'Error')
+		// 	}
+		// 	return Promise.reject(new Error(res.message || 'Error'))
+		// } else {
+			return res
+		// }
+	},
+	error => {
+		console.log('err' + error) // for debug
+		// Toast({
+		// 	message: '加载错误请刷新重试!',
+		// 	duration: 1 * 1000
+		// })
+		Message.error('加载错误请刷新重试')
+		return Promise.reject(error)
+	}
+)
+export default service

+ 66 - 3
src/router/index.js

@@ -7,13 +7,76 @@ const routes = [
   {
     path: '/',
     name: 'index',
-    component: () => import('../views/index.vue')
+    component: () => import('../views/index.vue'),
+    meta:{title: '荆门市红十字会 - 官网'}
   },
   {
     path: '/index',
     name: 'index',
-    component: () => import('../views/index.vue')
-  }
+    component: () => import('../views/index.vue'),
+    meta:{title: '荆门市红十字会 - 官网'}
+  },
+  {
+	path: '/content',
+    name: 'content',
+    component: () => import('../views/content.vue')
+  },
+  {
+    path: '/contactUs',
+    name: 'contactUs',
+    component: () => import('../views/contactUs/contactUs.vue')
+  },
+  {
+    path: '/partake',
+    name: 'partake',
+    component: () => import('../views/partake/partake.vue')
+  },
+  {
+    path: '/news',
+    name: 'news',
+    component: () => import('../views/news/news.vue')
+  },
+  {
+    path: '/business',
+    name: 'business',
+    component: () => import('../views/business/business.vue')
+  },
+  {
+    path: '/law',
+    name: 'law',
+    component: () => import('../views/law/law.vue')
+  },
+  {
+    path: '/introduce',
+    name: 'introduce',
+    component: () => import('../views/introduce/introduce.vue')
+  },
+  {
+    path: '/contribution',
+    name: 'contribution',
+    component: () => import('../views/contribution.vue')
+  },
+  {
+    path: '/volunteer',
+    name: 'volunteer',
+    component: () => import('../views/volunteer.vue')
+  },
+  {
+    path: '/searchList',
+    name: 'searchList',
+    component: () => import('../views/searchList.vue')
+  },
+  {
+    path: '/details',
+    name: 'details',
+    component: () => import('../views/details.vue')
+  },
+  {
+    path: '/vList',
+    name: 'vList',
+    component: () => import('../views/vList.vue')
+  },
+  
 ]
 
 const router = new VueRouter({

+ 53 - 0
src/store/index.js

@@ -5,11 +5,64 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+	www:'',//网址
+	newsList: {}, // 新闻信息
+	partakeList: [], // 我要参与
+	cityNewsList: [], // 市红十字会新闻
+	publicityList: [], // 公示/公告
+	countyNewsList: [] ,// 县市区红十字新闻 
+	newsList: [] ,// 新闻列表
+	lawList: [] ,// 政策法规
+	contactus: [] ,// 联系我们
+	introduce: [] ,// 组织介绍
+	business: [] ,// 核心业务
+	rotation: [] ,//轮播图
+	rankingList: [],
+	wallList: [] //志愿者
+	
   },
   mutations: {
+	  setPartakeList(state, provider) {
+	  	state.partakeList = provider;
+	  },
+	  setCityNewsList(state, provider) {
+	  	state.cityNewsList = provider;
+	  },
+	  setPublicityList(state, provider) {
+	  	state.publicityList = provider;
+	  },
+	  setCountyNewsList(state, provider) {
+	  	state.countyNewsList = provider;
+	  },
+	  setNewsList(state, provider) {
+	  	state.newsList = provider;
+	  },
+	  setLawList(state, provider) {
+	  	state.lawList = provider;
+	  },
+	  setContactus(state, provider) {
+	  	state.contactus = provider;
+	  },
+	  setIntroduce(state, provider) {
+	  	state.introduce = provider;
+	  },
+	  setBusiness(state, provider) {
+	  	state.business = provider;
+	  },
+	  setRotation(state, provider) {
+	  	state.rotation = provider;
+	  },
+	  setRankingList(state, provider) {
+	  	state.rankingList = provider;
+	  },
+	  setWallList(state, provider) {
+	  	state.wallList = provider;
+	  },
   },
   actions: {
+	  
   },
   modules: {
+	  
   }
 })

+ 36 - 0
src/utils/utils.js

@@ -0,0 +1,36 @@
+//时间戳转换成时间
+export function getCompleteTime(time) {
+	const num =13 - (time+'').length;
+	let l = 1;//倍数
+	for (let i = 0; i < num; i++) {
+		l+='0';
+	}
+	// 重新解析为数字
+	l = parseInt(l)
+	const date = new Date(parseInt(time) * l);
+	const year = date.getFullYear();
+	const mon = date.getMonth() + 1;
+	const day = date.getDate();
+	const hours = date.getHours();
+	const minu = date.getMinutes();
+	const sec = date.getSeconds();
+	return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
+}
+//时间戳转换成时间
+export function getTime(time) {
+	const num =13 - (time+'').length;
+	let l = 1;//倍数
+	for (let i = 0; i < num; i++) {
+		l+='0';
+	}
+	// 重新解析为数字
+	l = parseInt(l)
+	const date = new Date(parseInt(time) * l);
+	const year = date.getFullYear();
+	const mon = date.getMonth() + 1;
+	const day = date.getDate();
+	const hours = date.getHours();
+	const minu = date.getMinutes();
+	const sec = date.getSeconds();
+	return year + '-' + mon + '-' + day;
+}

+ 71 - 0
src/views/business/business.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class="business">
+		<jm-box :navList='navList' @navListC='navListC'>
+			<div class="about">
+				<div class="title">
+					应急救援
+				</div>
+				<p>备灾救灾是红十字会四大核心工作之一,是《中华人民共和国红十字会法》赋予红十字会的重要职责,是红十字会“人道、博爱、
+				奉献”精神的具体体现,是为社会扶危济困、行善积德的救助工程。</p>
+				<P>在特大自然灾害和突发公共事件面前,人总显得非常脆弱,当鲜活的生命遭受摧残,当巨额的财产蒙受损失的时候,红十字一-个 神圣的标志就会成为人们的旗帜,
+				它将汇聚八方力量,为灾难中的人们提供人道主义援助,帮助其度过难关,重建物质和精神家园。</P>
+			</div>
+		</jm-box>
+	</div>
+</template>
+
+<script>
+import { getArticList,getList } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				navChoose: 0,
+				navList: {
+					title: '核心业务',
+					url: 'business',
+					list: this.$store.state.business || []
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			navListC(index) {
+				this.navChoose = index
+			},
+			init() {
+				this.getdataList()
+			},
+			getdataList() {
+				getList({},16).then(({data}) => {
+					this.navList.list = data
+					this.$store.commit('setBusiness',data)
+				})
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.about {
+		background-color: #fff;
+		padding: 20px;
+		.title {
+			text-align: center;
+			color: red;
+			font-size: 18px;
+		}
+		p {
+			text-indent: 1cm;
+		}
+	}
+</style>

+ 83 - 0
src/views/contactUs/contactUs.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="contactus">
+		<jm-box :navList='navList' class="navList">
+			
+		</jm-box>
+	</div>
+</template>
+
+<script>
+import { getArticList,getList } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox
+		},
+		data() {
+			return {
+				navChoose: 0,
+				navList: {
+					title: '联系我们',
+					list: this.$store.state.contactus || []
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.getList()
+			},
+			getList() {
+				getList({},19).then(({data}) => {
+					this.navList.list = data
+					this.$store.commit('setContactus',data)
+				})
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.center {
+	color: #333333;
+	text-align: center;
+	.header {
+		padding: 20px 0;
+		.logo {
+			margin: 30px 0 20px 0;
+			img {
+				width: 80px;
+			}
+		}
+		.name {
+			img {
+				width: 300px;
+			}
+		}
+	}
+	.contactInformation {
+		margin: 50px 0;
+		font-family: PingFang-SC-Bold;
+		line-height: 30px;
+		letter-spacing: 3px;
+	}
+	.qrcode {
+		img {
+			width: 160px;
+		}
+		.about {
+			font-size: 12px;
+			font-weight: bold;
+		}
+	}
+	
+	
+}
+</style>

+ 53 - 0
src/views/content.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="law">
+		<jm-box :navList='navList' @navListC='navListC'>
+			<div class="center">
+				
+			</div>
+		</jm-box>
+	</div>
+</template>
+
+<script>
+import { getArticList } from '../request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				data: this.$route.params.data,
+				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
+				navList: {
+					name: '',
+					list: []
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				const data = this.$route.params.data
+				console.log(this.data)
+				this.navList.name = data.intr
+				this.getList(data.id)
+			},
+			getList(id) {
+				getArticList({},id).then(({data}) => {
+					console.log(data);
+					this.navList.list = data
+				})
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

+ 162 - 0
src/views/contribution.vue

@@ -0,0 +1,162 @@
+<template>
+	<div class="contribution">
+			<div class="boxtitle">
+				当前位置:首页 > 爱心榜
+			</div>
+		<div class="jmbox">
+			<div class="center">
+				<div class="title">
+					<div class="time"> 捐赠时间 </div>
+					<div class="name"> 捐赠者 </div>
+					<div class="price"> 捐赠金额 </div>
+					<div class="intention"> 捐赠意向 </div>
+					<div class="remarks"> 备注 </div>
+				</div>
+				<div class="list" v-for="l in list">
+					<div class="item">
+						<div class="time"> {{ getTime(l.createtime) }} </div>
+						<div class="name"> {{ l.contact }} </div>
+						<div class="price"> {{ l.amount }} </div>
+						<div class="intention"> {{ l.order_name }} </div>
+						<div class="remarks"> {{ l.remarks }} </div>
+					</div>
+				</div>
+			</div>
+			<div class="pagec">
+				<div class="fristPage" @click="page = 1">
+					第一页
+				</div>
+				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+				:class="{isChoose:count == page}">
+					{{ count }}
+				</div>
+				<div class="nextPage" @click='nextPage'>
+					下一页
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getTime } from '../utils/utils.js'
+import { getlaveList } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				navList: {
+					title: '爱心榜',
+				},
+				page: 1,
+				limit: 10,
+				sum: 0,
+				list: [],
+			}
+		},
+		computed: {
+			// 总页数
+			totalPage() {
+				return Math.ceil(this.sum/this.limit)
+			}
+		},
+		mounted() {
+			this.getlave()
+		},
+		methods: {
+			pageChoose(count) {
+				this.page = count
+			},
+			getTime(time) {
+				return getTime(time)
+			},
+			// 下一页
+			nextPage() {
+				this.page++ 
+				if (this.page > this.totalPage) {
+					this.page = this.totalPage
+				}
+			},
+			// 爱心榜
+			getlave() {
+				getlaveList({},this.page,this.limit).then(res => {
+					this.list = res.data.data
+					this.sum = res.data.count
+				})
+			},
+		},
+		watch: {
+			page() {
+				this.getlave()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.jmbox {
+	height: 600px;
+	padding: 30px 0;
+}
+.contribution {
+	box-shadow: 1px 1px 6px #e1e1e1;
+	border-top: solid 2px $red;
+	background-color: #fff;
+	.boxtitle {
+		padding: 10px;
+		background-color: #F2F2F2;
+	}
+	.center {
+		text-align: center;
+		.time,.price,.remarks,.name,.intention {
+			border: solid 1px #F2F2F2;
+			padding: 5px;
+		}
+		.time,.price,.remarks {
+			flex: 1;
+		}
+		.name,.intention {
+			flex: 2;
+		}
+		.title {
+			color: $red;
+			display: flex;
+			justify-content: space-around;
+		}
+		.list {
+			.item {
+				display: flex;
+				justify-content: space-around;
+			}
+		}
+	}
+	.pagec {
+		display: flex;
+		float: right;
+		margin: 20px 30px;
+		.fristPage,.pageNum,.nextPage {
+			margin-left: 3px;
+			border: solid 1px #F2F2F2;
+			line-height: 30px;
+			text-align: center;
+		}
+		.fristPage,.nextPage {
+			padding: 0 10px;
+		}
+		.pageNum {
+			width: 30px;
+			height: 30px;
+		}
+		.isChoose {
+			background-color: $red;
+			color: #fff;
+		}
+	}
+}
+</style>
+

+ 97 - 0
src/views/details.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="details">
+			<div class="boxtitle">
+				当前位置:首页 > 文章详情
+			</div>
+		<div class="jmbox">
+			<div class="center" v-html="content">
+				
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { details } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				content: '',
+				id: this.$route.params.id || this.$route.query.id || 0,
+			}
+		},
+		mounted() {
+			this.getData()
+		},
+		methods: {
+			getData() {
+				const id = this.id
+				details({},id).then(res => {
+					
+					if (res.data.url == '') {
+						this.content = res.data.content
+					} else{
+						this.originalText(res.data.url)
+					}
+				})
+			},
+			// 查看原文
+			originalText(url) {
+				 window.open(url)
+				 this.$router.go(-1)
+			}
+		},
+		watch: {
+			page() {
+				this.getlave()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.jmbox {
+	min-height: 600px;
+	padding: 30px 0;
+			box-shadow: 1px 1px 6px #e1e1e1;
+}
+.details {
+	border-top: solid 2px $red;
+	background-color: #fff;
+	.boxtitle {
+		padding: 10px;
+		background-color: #F2F2F2;
+	}
+	.center {
+		text-align: center;
+		.time,.price,.remarks,.name,.intention {
+			border: solid 1px #F2F2F2;
+			padding: 5px;
+		}
+		.time,.price,.remarks {
+			flex: 1;
+		}
+		.name,.intention {
+			flex: 2;
+		}
+		.title {
+			color: $red;
+			display: flex;
+			justify-content: space-around;
+		}
+		.list {
+			.item {
+				display: flex;
+				justify-content: space-around;
+			}
+		}
+	}
+}
+</style>
+

+ 663 - 2
src/views/index.vue

@@ -1,11 +1,672 @@
 <template>
 	<div class="index">
-		index
+		<div class="headerGrid">
+			<div class="swiper">
+				<el-carousel :interval="5000" type="card" height="200px" class="swiper-box">
+				    <el-carousel-item v-for="(r,index) in rotation" :key="index" class="swiper-box-item">
+					    	<img :src="image(r.image)" class="swiper-img">
+					    	<div class="title">
+					    		{{ r.title }}
+					    	</div>
+				    </el-carousel-item>
+				  </el-carousel>
+			</div>
+			<div class="participate">
+				<div class="title1">
+					我要参与
+				</div>
+				<div class="list">
+					<div class="item" v-for="(n,index) in partakeList" @click="navTo(index)">
+						<img :src="image(n.image)" class="iNimg">
+						<div class="name">
+							{{ n.title }}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="cityNews">
+				<div class="title title2">
+					市红十字会新闻 <div class="more" @click="urlTo('news')">【查看更多】</div>
+				</div>
+				<div class="list chooseitem">
+					<div class="item" v-for="c in cityNewsList" @click="newsTo(0,c)">
+						<div class="title" :title="c.title">
+							<div class="spot"></div>
+							<div class="nowarp">
+								{{ c.title }}
+							</div>
+						</div>
+						<div class="time">
+							{{ getDataTime(c)}}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="ranking">
+				<div class="title title1">
+					爱心滚动榜 <div class="more" @click="urlTo('contribution')">【查看更多】</div>
+				</div>
+				<div class="listHeader">
+					<div class=""> 捐赠时间 </div>
+					<div class=""> 捐赠者 </div>
+					<div class=""> 捐赠金额 </div>
+				</div>
+				<slideUpd>
+					<div class="list">
+						<div class="listTime">
+							<div class="item" v-for="r in rankingList">
+								{{ getPaytime(r)}}
+							</div>
+						</div>
+						<div class="listName">
+							<div class="item nowarp" v-for="r in rankingList" :title="r.contact">
+								{{ r.contact || '空' }}
+							</div>
+						</div>
+						<div class="listPrice">
+							<div class="item" v-for="r in rankingList">
+								{{ r.amount || ''  }}
+							</div>
+						</div>
+					</div>
+				</slideUpd>
+				
+				
+			</div>
+		</div>
+		<div class="boxFlex">
+			<div class="box">
+				<div class="title title2">
+					县市区红十字新闻 <div class="more" @click="urlTo('news',1)">【查看更多】</div>
+				</div>
+				<div class="list chooseitem">
+					<div class="item" v-for="c in countyNewsList" @click="newsTo(1,c)">
+						<div class="title" :title="c.title">
+							<div class="spot"></div>
+							<div class="nowarp">
+								{{ c.title }}
+							</div>
+						</div>
+						<div class="time">
+							{{ getDataTime(c) }}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="box">
+				<div class="title title2">
+					公示/公告 <div class="more" @click="urlTo('news',3)">【查看更多】</div>
+				</div>
+				<div class="list chooseitem">
+					<div class="item" v-for="p in publicityList" @click="newsTo(3,p)">
+						<div class="title" :title="p.title">
+							<div class="spot"></div>
+							<div class="nowarp">
+								{{ p.title }}
+							</div>
+						</div>
+						<div class="time">
+							{{ getDataTime(p) }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="index-img">
+			<img src="../assets/img/index-h.png" >
+		</div>
+		<div class="wallAwechat">
+			<div class="wall">
+				<div class="title">
+					优秀志愿者风采墙
+				</div>
+				<div class="walllist">
+					<div class="wallInput">
+						<input type="text" placeholder="输入姓名搜索志愿者" v-model="searchV"/>
+						<img src="../assets/img/search.png" class="wallImg" @click="searchbu">
+					</div>
+					<slideLaR class="slideLaR">
+						<div class="item" v-for="(l,index) in wallList" @click="volunteerTo(l.id)">
+							<img :src="image(l.image)" >
+						</div>
+					</slideLaR>
+				</div>
+			</div>
+			<div class="wechat">
+				<div class="title">
+					微信公众号
+				</div>
+				<div class="qrcode">
+					<div class="">
+						<img src="../assets/img/scanning.png" class="scanning">
+						<div> 请扫码关注<br>荆门市红十字会<br>官方微信公众号 </div>
+					</div>
+					<div class="qrcodeImg">
+						<img src="../assets/img/qrcode.png" >
+					</div>
+					
+				</div>
+			</div>
+		</div>
+		<div class="links">
+			<div class="title title2">
+				友情链接
+			</div>
+			<div class="links-list">
+				<div class="links-item" v-for="l in linksList" @click="toRescue(l.url)">
+					<img :src="l.img" >
+				</div>
+			</div>
+			
+		</div>
 	</div>
 </template>
 
 <script>
+import { getTime } from '../utils/utils.js'
+
+import { getArticList,details,getList,getlaveList,getvolunteerList,getSearch } from '../request/api.js'
+import slideUpd from '../components/slideUpd.vue'
+import slideLaR from '../components/slideLaR.vue'
+	export default {
+		data() {
+			return {
+				searchV: '',
+				path: this.$route.path,
+				partakeList: this.$store.state.partakeList || [],
+				rankingList: this.$store.state.rankingList || [],
+				cityNewsList: this.$store.state.cityNewsList || [],
+				countyNewsList: this.$store.state.countyNewsList || [],
+				publicityList: this.$store.state.publicityList || [],
+				wallList: this.$store.state.wallList || [],
+				
+				rotation: this.$store.state.rotation || [],
+				linksList: [
+					{
+						img: require('@/assets/img/yq1.png'),
+						url: 'https://www.redcross.org.cn/'
+					},
+					{
+						img: require('@/assets/img/yq2.png'),
+						url: 'http://www.hbsredcross.org.cn/'
+					},
+					{
+						img: require('@/assets/img/yq3.png'),
+						url: 'https://www.codac.org.cn/'
+					},
+					{
+						img: require('@/assets/img/yq4.png'),
+						url: 'http://www.hbmdp.org.cn/'
+					},
+					{
+						img: require('@/assets/img/yq5.png'),
+						url: 'http://www.hbqgjx.com/'
+					},
+					
+				]
+			}
+		},
+		mounted() {
+			this.getPartakeList()
+			this.getWallList()
+			this.getlave()
+			this.getNewsList()
+			this.getRotation()
+		},
+		methods: {
+			// 首页图展示
+			getRotation() {
+				getArticList({page:1,limit:3},27).then(({data}) => {
+					this.rotation = data.list
+					this.$store.commit('setRotation',data.list)
+				})
+			},
+			// 我要参与列表
+			getPartakeList() {
+				getList({},18).then(({data}) => {
+					this.partakeList = data
+					this.$store.commit('setPartakeList',data)
+				})
+			},
+			// 优秀志愿者
+			getWallList() {
+				getArticList({page:1,limit:15},21).then(({data}) => {
+					this.wallList = data.list
+					this.$store.commit('setWallList',data.list)
+				})
+			},
+			// 爱心榜
+			getlave() {
+				this.getlaveListson()
+			},
+			// 爱心榜
+			getlaveListson() {
+				getlaveList({},1,10).then(res => {
+					this.rankingList = res.data.data
+					this.$store.commit('setRankingList',res.data.data)
+				})
+			},
+			// 新闻
+			getNewsList() {
+				// 市红十字会新闻
+				getArticList({page:1,limit:20},27).then(({data}) => {
+					this.cityNewsList = data.list
+					this.$store.commit('setCityNewsList',data.list)
+				})
+				// 县市区红十字新闻
+				getArticList({page:1,limit:20},28).then(({data}) => {
+					this.countyNewsList = data.list
+					this.$store.commit('setCountyNewsList',data.list)
+				})
+				// 公示/公告
+				getArticList({page:1,limit:20},30).then(({data}) => {
+					this.publicityList = data.list
+					this.$store.commit('setPublicityList',data.list)
+				})
+				this.toTop()
+			},
+			// 跳转页面
+			urlTo(name,navChoose) {
+				this.$router.push({
+					name: name,
+					params:{navChoose :navChoose || 0}
+				})
+				this.toTop()
+			},
+			// 跳外部链接
+			toRescue(url) {
+				window.location.href = url;
+			},
+			volunteerTo(id) {
+				this.$router.push({
+					name: 'volunteer',
+					query:{id :id || 0}
+				})
+				this.toTop()
+			},
+			// 我要参与中跳转页面
+			navTo(index) {
+				this.$router.push({
+					name: 'partake',
+					params:{navChoose :index || 0}
+				})
+				this.toTop()
+			},
+			newsTo(navChoose,data) {
+				this.$router.push({
+					name: 'news',
+					params:{navChoose: navChoose || 0,contentId: data.id || 0}
+				})
+				this.toTop()
+			},
+			// 返回顶部
+			toTop() {
+				document.documentElement.scrollTop = 0
+				document.body.scrollTop = 0
+			},
+			image(url) {
+				const baseURL = 'http://red.liuniu946.com'
+				return baseURL + url
+			},
+			getTime(time) {
+				return getTime(time)
+			},
+			getDataTime(data) {
+				if (data.releasetime != '') {
+					return data.releasetime.substr(0,10)
+				}else {
+					return this.getTime(data.createtime)
+				}
+			},
+			getPaytime(data) {
+				return this.getTime(data.paytime)
+			},
+			searchbu() {
+				this.$router.push({
+					name: 'vList',
+					query: {value: this.searchV}
+				})
+				this.toTop()
+			}
+		},
+		components: {
+			slideLaR,
+			slideUpd
+		}
+		
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	$pink: #d8272a;
+	.index {
+		$red: #D82020;
+		.title1 {
+			text-align: center;
+			background-color: $red;
+			color: #fff;
+			height: 30px;
+			line-height: 30px;
+		}
+		.title2 {
+			background-color: $red;
+			color: #fff;
+			width: 150px;
+			height: 28px;
+			line-height: 28px;
+			text-align: center;
+			font-size: 14px;
+		}
+		.headerGrid {
+			width: 100%;
+		    display: grid;
+		    grid-template-columns: 3fr 2fr;
+		    grid-template-rows: auto 300px;
+			.swiper {
+				position: relative;
+				background-color: #fff;
+				margin-right: 10px;
+				height: 420px;
+				overflow: hidden;
+				.swiper-box {
+					margin: 0 -230px;
+					width: calc(100% + 300px);
+					height: 420px;
+					.swiper-box-item {
+						width: calc(100% + 300px);
+						height: 420px;
+						.swiper-img {
+							margin: auto auto;
+							min-width: 600px;
+							min-height: 420px;
+						}
+					}
+				}
+				.title {
+					width: 100%;
+					padding: 10px 30px;
+					position: absolute;
+					background-color: rgba(0,0,0,0.6);
+					color: #fff;
+					bottom: 0;
+				}
+			}
+			.participate {
+				box-shadow: 1px 1px 6px #e1e1e1;
+				flex: 2;
+				text-align: center;
+				.title {
+					
+				}
+				.list {
+					background-color: #fff;
+					display: flex;
+					justify-content: space-around;
+					flex-wrap: wrap;
+					font-size: 12px;
+					color: #323131;
+					padding: 20px 0;
+					.item {
+						min-width: 30%;
+						margin: 5px 1%;
+						.iNimg {
+							width: 85px;
+							margin: 5px;
+						}
+					}
+					
+				}
+			}
+			.cityNews {
+				box-shadow: 1px 1px 6px #e1e1e1;
+				overflow: hidden;
+				border-top: solid 3px $red;
+				margin-right: 10px;
+				position: relative;
+				.title {
+					.more {
+						color: #666666;
+						height: 28px;
+						position: absolute;
+						top: 0;
+						right: 5px;
+						font-size: 11px;
+					}
+				}
+				.list {
+					.item {
+						padding: 5px 0;
+						display: flex;
+						justify-content: space-between;
+						font-size: 14px;
+						.title {
+							display: flex;
+							line-height: 25px;
+							margin-right: 5px;
+							.nowarp {
+								max-width: 400px;
+							}
+							.spot {
+								width: 5px;
+								height: 5px;
+								border-radius: 50%;
+								background-color: #D8D8D8;
+								margin: auto 8px;
+							}
+						}
+							overflow: hidden;
+							height: 25px;
+							line-height: 25px;
+						.time {
+							padding: 0 10px;
+						}
+					}
+				}
+			}
+			.ranking {
+				box-shadow: 1px 1px 6px #e1e1e1;
+				min-height: 100px;
+				overflow: hidden;
+				position: relative;
+				width: 100%;
+				font-size: 14px;
+				.title {
+					.more {
+						height: 30px;
+						position: absolute;
+						top: 0;
+						right: 5px;
+						font-size: 11px;
+					}
+				}
+				.listHeader {
+					display: flex;
+					justify-content: space-around;
+					text-align: center;
+					color: $red;
+					font-weight: bold;
+					padding: 10px;
+					border-bottom: solid 1px #F2F2F2;
+					div {
+						flex: 1;
+					}
+				}
+				.list {
+					display: flex;
+					justify-content: space-around;
+					text-align: center;
+					.listTime,.listName,.listPrice {
+						flex: 1;
+						.item {
+							line-height: 30px;
+							height: 30px;
+							border-bottom: solid 1px #F2F2F2;
+						}
+					}
+				}
+			}
+		}
+		.boxFlex {
+			margin: 20px 0;
+			display: flex;
+			.box:nth-child(1) {
+				margin-right: 10px;
+			}
+			.box {
+				flex: 1;
+				position: relative;
+				border-top: solid 2px $red;
+				height: 320px;
+				overflow: hidden;
+				box-shadow: 1px 1px 6px #e1e1e1;
+				.more {
+					height: 28px;
+					position: absolute;
+					color: #666666;
+					top: 0;
+					right: 5px;
+					font-size: 11px;
+				}
+				.list {
+					.title {
+							line-height: 25px;
+							overflow: hidden;
+							height: 25px;
+						display: flex;
+						.nowarp {
+							max-width: 350px;
+						}
+						.spot {
+							width: 5px;
+							height: 5px;
+							border-radius: 50%;
+							background-color: #D8D8D8;
+							margin: auto 8px;
+						}
+					}
+					.time {
+						// padding: 0 10px;
+					}
+				}
+				.list {
+					.item {
+						font-size: 14px;
+						padding: 10px;
+						display: flex;
+						justify-content: space-between;
+					}
+				}
+			}
+		}
+		.index-img {
+			img {
+				width: 100%;
+			}
+		}
+		.wallAwechat {
+			margin-top: 20px;
+			display: flex;
+			.wall {
+				box-shadow: 1px 1px 6px #e1e1e1;
+				flex: 4;
+				border-top: solid 1px $red;
+				min-width: 50%;
+				margin-right: 10px;
+				.title {
+					text-align: center;
+					background-color: $red;
+					color: #fff;
+					width: 150px;
+					padding: 5px 10px;
+				}
+				.walllist {
+					.wallInput {
+						margin : -35px 10px 0 0;
+						float: right;
+						position: relative;
+						input {
+							min-width: 200px;
+							border-radius: 20px;
+							border: solid 1px $red;
+							padding: 5px 10px;
+							height: 15px;
+						    outline: none; // 设置点击后无效果
+						}
+						.wallImg {
+							height: 15px;
+							position: absolute;
+							top: 7px;
+							right: 10px;
+						}
+					}
+					.slideLaR {
+						margin-top: 20px;
+						.item {
+							margin: 5px 10px;
+							img {
+								height: 90px
+							}
+						}
+					}
+				}
+			}
+			.wechat {
+				box-shadow: 1px 1px 6px #e1e1e1;
+				flex: 1;
+				min-width: 250px;
+				border-top: solid 1px $red;
+				max-width: 50%;
+				.title {
+					text-align: center;
+					background-color: $red;
+					color: #fff;
+					width: 100px;
+					padding: 5px 10px;
+				}
+				.qrcode {
+					text-align: center;
+					display: flex;
+					justify-content: space-between;
+					padding: 10px;
+					color: #333333;
+					font-size: 14px;
+					line-height: 20px;
+					.scanning {
+						width: 50px;
+						height: 50px;
+					}
+					.qrcodeImg {
+						img {
+							width: 100px;
+							height: 100px;
+						}
+						
+					}
+				}
+			}
+		}
+		.links {
+			margin-top: 20px;
+			box-shadow: 1px 1px 6px #e1e1e1;
+			border-top: solid 1px $red;
+			.links-list {
+				padding: 10px 20px;
+				display: flex;
+				justify-content: space-around;
+				.links-item {
+					margin: 10px;
+					img {
+						width: 100%;
+					}
+				}
+			}
+			
+		}
+	}
+	.chooseitem  {
+		color: #333333;		
+	}
+	.chooseitem :hover {
+		color: $pink;		
+	}
 </style>

+ 51 - 0
src/views/introduce/introduce.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="introduce">
+		<jm-box :navList='navList' @navListC='navListC'>
+			<!-- <div class="center"> -->
+				<!-- <county v-show="navChoose == 2"></county> -->
+			<!-- </div> -->
+		</jm-box>
+	</div>
+</template>
+
+<script>
+import { getArticList,getList } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		mounted() {
+			this.init()
+		},
+		data() {
+			return {
+				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
+				navList: {
+					title: '组织介绍',
+					url: 'introduce',
+					list: this.$store.state.introduce || []
+				}
+			}
+		},
+		methods: {
+			init() {
+				this.getdataList()
+			},
+			getdataList() {
+				getList({},14).then(res => {
+					this.navList.list = res.data
+					this.$store.commit('setIntroduce',res.data)
+				})
+				
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

+ 50 - 0
src/views/law/law.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="law">
+		<jm-box :navList='navList' @navListC='navListC'>
+		</jm-box>
+	</div>
+</template>
+
+<script>	
+import { getArticList,getList } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				navChoose: 0,
+				navList: {
+					title: '政策法规',
+					url: 'law',
+					list: this.$store.state.lawList ||  []
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			navListC(index) {
+				this.navChoose = index
+			},
+			init() {
+				this.getList()
+			},
+			getList() {
+				getList({},15).then(({data}) => {
+					this.navList.list = data
+					this.$store.commit('setLawList',data)
+				})
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

+ 52 - 0
src/views/news/news.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="news">
+		<jm-box :navList='navList' @navListC='navListC'>
+		</jm-box>
+	</div>
+</template>
+
+<script> 
+import { getArticList,details,getList } from '@/request/api.js'
+
+	
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox
+		},
+		data() {
+			return {
+				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
+				navList: {
+					title: '新闻资讯',
+					listinlist: true, // 判断列表内是否还有列表
+					list: this.$store.state.newsList || []
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			navListC(index) {
+				this.navChoose = index
+			},
+			init() {
+				this.getdataList()
+			},
+			getdataList() {
+				getList({},17).then(({data}) => {
+					console.log(data);
+					this.navList.list = data
+					this.$store.commit('setNewsList',data)
+				})
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

+ 51 - 0
src/views/partake/partake.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="partake">
+		<jm-box :navList='navList' @navListC='navListC'>
+			
+		</jm-box>
+	</div>
+</template>
+
+<script>
+
+import { getArticList,getList } from '@/request/api.js'
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		mounted() {
+			this.init()
+		},
+		data() {
+			return {
+				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
+				navList: {
+					title: '我要参与',
+					url: 'partake',
+					list: this.$store.state.partakeList || []
+				}
+			}
+		},
+		methods: {
+			init() {
+				this.getList()
+			},
+			getList() {
+				getList({},18).then(({data}) => {
+					this.navList.list = data
+					this.$store.commit('setPartakeList',data)
+				})
+			},
+			navListC(index) {
+				this.navChoose = index
+			}
+		}
+	}
+</script>
+
+<style>
+	.center {
+		padding: 10px 20px;
+	}
+</style>

+ 186 - 0
src/views/searchList.vue

@@ -0,0 +1,186 @@
+<template>
+	<div class="searchList">
+			<div class="boxtitle">
+				当前位置:首页 > 搜索
+			</div>
+		<div class="jmbox">
+			<div class="list chooseitem">
+				<div class="item" v-for="l in list" @click="navto(l.id)">
+					
+					<div class="title nowarp" :title="l.title">
+						{{ l.title }}
+					</div>
+					<div class="time">
+						{{ getTime(l.releasetime) }}
+					</div>
+				</div>
+			</div>
+			<div class="pagec">
+				<div class="fristPage" @click="page = 1">
+					第一页
+				</div>
+				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+				:class="{isChoose:count == page}">
+					{{ count }}
+				</div>
+				<div class="nextPage" @click='nextPage'>
+					下一页
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getSearch } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				page: 1,
+				limit: 15,
+				sum: 0,
+				list: [],
+				value: this.$route.params.value || this.$route.query.value || 0,
+			}
+		},
+		mounted() {
+			this.getData()
+		},
+		methods: {
+			pageChoose(page) {
+				this.page = page
+			},
+			// 下一页
+			nextPage() {
+				this.page++ 
+				if (this.page > this.totalPage) {
+					this.page = this.totalPage
+				}
+			},
+			getData() {
+				const value = this.$route.query.value
+				getSearch({},value,this.page,this.limit).then(res => {
+					console.log(res.data);
+					this.sum = res.data.count
+					this.list = res.data.list
+				})
+			},
+			navto(id) {
+				this.$router.push({
+					name: 'details',
+					query: {id: id}
+				})
+			},
+			getTime(time) {
+				return time.substring(0,10)
+			}
+		},
+		computed: {
+			// 总页数
+			totalPage() {
+				return Math.ceil(this.sum/this.limit)
+			},
+		},
+		watch: {
+			'$route'() {
+				this.getData()
+			},
+			page() {
+				this.getData()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.jmbox {
+	box-shadow: 1px 1px 6px #e1e1e1;
+	min-height: 600px;
+	padding: 30px 20px;
+	.list {
+		.item {
+			padding: 0 30px;
+			display: flex;
+			justify-content: space-between;
+			line-height: 35px;
+			height: 35px;
+			// color: #333333;
+			border-bottom: solid 1px #e8ecf5;
+			.title {
+				width: calc(100% - 110px);
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+}
+.searchList {
+	border-top: solid 2px $red;
+	background-color: #fff;
+	.boxtitle {
+		padding: 10px;
+		background-color: #F2F2F2;
+	}
+	.center {
+		text-align: center;
+		.time,.price,.remarks,.name,.intention {
+			border: solid 1px #F2F2F2;
+			padding: 5px;
+		}
+		.time,.price,.remarks {
+			flex: 1;
+		}
+		.name,.intention {
+			flex: 2;
+		}
+		.title {
+			color: $red;
+			display: flex;
+			justify-content: space-around;
+		}
+		.list {
+			.item {
+				display: flex;
+				justify-content: space-around;
+			}
+		}
+	}
+}
+.pagec {
+	color: #333333;
+	display: flex;
+	float: right;
+	margin: 20px 30px;
+	.fristPage,.pageNum,.nextPage {
+		margin-left: 3px;
+		border: solid 1px #F2F2F2;
+		line-height: 30px;
+		text-align: center;
+		color: #333;
+	}
+	.fristPage,.nextPage {
+		padding: 0 10px;
+	}
+	.pageNum {
+		width: 30px;
+		height: 30px;
+	}
+	.isChoose {
+		background-color: $red;
+		color: #fff;
+	}
+}
+	.chooseitem  {
+		color: #333333;		
+	}
+	.chooseitem :hover {
+		color: #d8272a;		
+	}
+</style>
+

+ 183 - 0
src/views/vList.vue

@@ -0,0 +1,183 @@
+<template>
+	<div class="searchList">
+			<div class="boxtitle">
+				当前位置:首页 > 搜索
+			</div>
+		<div class="jmbox">
+			<div class="list chooseitem">
+				<div class="item" v-for="l in list" @click="navto(l.id)">
+					
+					<div class="title nowarp" :title="l.title">
+						{{ l.title }}
+					</div>
+					<div class="time">
+						{{ getTime(l.releasetime) }}
+					</div>
+				</div>
+			</div>
+			<div class="pagec">
+				<div class="fristPage" @click="page = 1">
+					第一页
+				</div>
+				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+				:class="{isChoose:count == page}">
+					{{ count }}
+				</div>
+				<div class="nextPage" @click='nextPage'>
+					下一页
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getvSearch } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				page: 1,
+				limit: 15,
+				sum: 0,
+				list: [],
+				value: this.$route.params.value || this.$route.query.value || 0,
+			}
+		},
+		mounted() {
+			this.getData()
+		},
+		methods: {
+			pageChoose(page) {
+				this.page = page
+			},
+			// 下一页
+			nextPage() {
+				this.page++ 
+				if (this.page > this.totalPage) {
+					this.page = this.totalPage
+				}
+			},
+			getData() {
+				const value = this.$route.query.value
+				getvSearch({},value,this.page,this.limit).then(res => {
+					this.sum = res.data.count
+					this.list = res.data.list
+				})
+			},
+			navto(id) {
+				this.$router.push({
+					name: 'volunteer',
+					query: {id: id}
+				})
+			},
+			getTime(time) {
+				return time.substring(0,10)
+			}
+		},
+		computed: {
+			// 总页数
+			totalPage() {
+				return Math.ceil(this.sum/this.limit)
+			},
+		},
+		watch: {
+			'$route'() {
+				this.getData()
+			},
+			page() {
+				this.getData()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.jmbox {
+	box-shadow: 1px 1px 6px #e1e1e1;
+	min-height: 600px;
+	padding: 30px 20px;
+	.list {
+		.item {
+			padding: 0 30px;
+			display: flex;
+			justify-content: space-between;
+			line-height: 35px;
+			height: 35px;
+			border-bottom: solid 1px #e8ecf5;
+			.title {
+				width: calc(100% - 110px);
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+}
+.searchList {
+	border-top: solid 2px $red;
+	background-color: #fff;
+	.boxtitle {
+		padding: 10px;
+		background-color: #F2F2F2;
+	}
+	.center {
+		text-align: center;
+		.time,.price,.remarks,.name,.intention {
+			border: solid 1px #F2F2F2;
+			padding: 5px;
+		}
+		.time,.price,.remarks {
+			flex: 1;
+		}
+		.name,.intention {
+			flex: 2;
+		}
+		.title {
+			color: $red;
+			display: flex;
+			justify-content: space-around;
+		}
+		.list {
+			.item {
+				display: flex;
+				justify-content: space-around;
+			}
+		}
+	}
+}.pagec {
+	color: #333333;
+	display: flex;
+	float: right;
+	margin: 20px 30px;
+	.fristPage,.pageNum,.nextPage {
+		margin-left: 3px;
+		border: solid 1px #F2F2F2;
+		line-height: 30px;
+		text-align: center;
+		color: #333;
+	}
+	.fristPage,.nextPage {
+		padding: 0 10px;
+	}
+	.pageNum {
+		width: 30px;
+		height: 30px;
+	}
+	.isChoose {
+		background-color: $red;
+		color: #fff;
+	}
+}
+	.chooseitem  {
+		color: #333333;		
+	}
+	.chooseitem :hover {
+		color: #d8272a;		
+	}
+</style>
+

+ 96 - 0
src/views/volunteer.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="volunteer">
+			<div class="boxtitle">
+				当前位置:首页 > 优秀志愿者 > 志愿者简介
+			</div>
+		<div class="jmbox">
+			<div class="center" v-html="content">
+				
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { details } from '@/request/api.js'
+
+import jmBox from '@/components/box.vue'
+	export default {
+		components: {
+			jmBox,
+		},
+		data() {
+			return {
+				content: '',
+				id: this.$route.params.id || this.$route.query.id || 0,
+			}
+		},
+		mounted() {
+			this.getData()
+		},
+		methods: {
+			getData() {
+				const id = this.id
+				details({},id).then(res => {
+					if (res.data.url == '') {
+						this.content = res.data.content
+					} else{
+						this.originalText(res.data.url)
+					}
+				})
+			},
+			// 查看原文
+			originalText(url) {
+				 window.open(url)
+				 this.$router.go(-1)
+			}
+		},
+		watch: {
+			page() {
+				this.getlave()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$red: #D82020;
+.jmbox {
+	box-shadow: 1px 1px 6px #e1e1e1;
+	min-height: 600px;
+	padding: 30px 0;
+}
+.volunteer {
+	border-top: solid 2px $red;
+	background-color: #fff;
+	.boxtitle {
+		padding: 10px;
+		background-color: #F2F2F2;
+	}
+	.center {
+		text-align: center;
+		.time,.price,.remarks,.name,.intention {
+			border: solid 1px #F2F2F2;
+			padding: 5px;
+		}
+		.time,.price,.remarks {
+			flex: 1;
+		}
+		.name,.intention {
+			flex: 2;
+		}
+		.title {
+			color: $red;
+			display: flex;
+			justify-content: space-around;
+		}
+		.list {
+			.item {
+				display: flex;
+				justify-content: space-around;
+			}
+		}
+	}
+}
+</style>
+

+ 30 - 0
vue.config.js

@@ -0,0 +1,30 @@
+'use strict'
+const path = require('path')
+const port = process.env.port || process.env.npm_config_port || 9527 // dev port
+module.exports = {
+	publicPath: '/wap',
+	outputDir: 'dist',
+	indexPath: process.env.NODE_ENV === 'development' ? 'mer.html' : 'index.html',
+	lintOnSave: false,
+	productionSourceMap: false,
+	devServer: {
+		port: port,
+		// open: true,
+		overlay: {
+			warnings: false,
+			errors: true
+		},
+		// proxy: 'http://red.liuniu946.com'
+		proxy: {
+			'/api': {
+				target: `http://red.liuniu946.com`, // 需要代理到的地址               
+				changeOrigin: true,
+				// ws: true,
+				pathRewrite: {
+					'^/api': '/api'
+				}
+			}
+		}
+	}
+
+}

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.