diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4c992f9..8d81030 100644
--- a/pages.json
+++ b/pages.json
@@ -32,7 +32,23 @@
 					"navigationBarTitleText": "我的",
 					"enablePullDownRefresh": false
 				}      
-      }
+      },
+			{
+				"path" : "pages/messageList/messageList",
+				"style" :                                                                                    
+				{
+					"navigationBarTitleText": "网信信息列表",
+					"enablePullDownRefresh": true
+				}    
+      },
+			{
+				"path" : "pages/messageDetail/messageDetail",
+				"style" :                                                                                    
+				{
+						"navigationBarTitleText": "网信信息详情",
+						"enablePullDownRefresh": false
+				}	
+			}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4c992f9..8d81030 100644
--- a/pages.json
+++ b/pages.json
@@ -32,7 +32,23 @@
 					"navigationBarTitleText": "我的",
 					"enablePullDownRefresh": false
 				}      
-      }
+      },
+			{
+				"path" : "pages/messageList/messageList",
+				"style" :                                                                                    
+				{
+					"navigationBarTitleText": "网信信息列表",
+					"enablePullDownRefresh": true
+				}    
+      },
+			{
+				"path" : "pages/messageDetail/messageDetail",
+				"style" :                                                                                    
+				{
+						"navigationBarTitleText": "网信信息详情",
+						"enablePullDownRefresh": false
+				}	
+			}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e083b1..5e3baea 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,11 +1,22 @@
 <template>
-	<view>
-		举报中心
+	<view class="center">
+		<Title />
+		<view class="back">
+			<view class="main">
+				<text>网络安全为人民</text>
+				<text class="bottom-text">网络安全靠人民</text>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import Title from '../../components/base/title.vue';
 	export default {
+		name: 'center',
+		components: {
+			Title
+		},
 		data() {
 			return {
 				
@@ -17,6 +28,28 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.center {
+		width: 100%;
+		height: 100%;
+		padding-top: 160rpx;
+		.back {
+			padding: 40rpx;
+			.main {
+				display: flex;
+				flex-direction: column;
+				// justify-content: center;
+				align-items: center;
+				background: linear-gradient(to right, #153164 0%, #0f4ae0 100%);
+				color: #fff;
+				font-weight: 600;
+				letter-spacing: 20rpx;
+				border-radius: 20rpx;
+				padding: 20rpx 0;
+				.bottom-text {
+					// margin-top: 20rpx;
+				}
+			}
+		}
+	}
 </style>

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4c992f9..8d81030 100644
--- a/pages.json
+++ b/pages.json
@@ -32,7 +32,23 @@
 					"navigationBarTitleText": "我的",
 					"enablePullDownRefresh": false
 				}      
-      }
+      },
+			{
+				"path" : "pages/messageList/messageList",
+				"style" :                                                                                    
+				{
+					"navigationBarTitleText": "网信信息列表",
+					"enablePullDownRefresh": true
+				}    
+      },
+			{
+				"path" : "pages/messageDetail/messageDetail",
+				"style" :                                                                                    
+				{
+						"navigationBarTitleText": "网信信息详情",
+						"enablePullDownRefresh": false
+				}	
+			}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e083b1..5e3baea 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,11 +1,22 @@
 <template>
-	<view>
-		举报中心
+	<view class="center">
+		<Title />
+		<view class="back">
+			<view class="main">
+				<text>网络安全为人民</text>
+				<text class="bottom-text">网络安全靠人民</text>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import Title from '../../components/base/title.vue';
 	export default {
+		name: 'center',
+		components: {
+			Title
+		},
 		data() {
 			return {
 				
@@ -17,6 +28,28 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.center {
+		width: 100%;
+		height: 100%;
+		padding-top: 160rpx;
+		.back {
+			padding: 40rpx;
+			.main {
+				display: flex;
+				flex-direction: column;
+				// justify-content: center;
+				align-items: center;
+				background: linear-gradient(to right, #153164 0%, #0f4ae0 100%);
+				color: #fff;
+				font-weight: 600;
+				letter-spacing: 20rpx;
+				border-radius: 20rpx;
+				padding: 20rpx 0;
+				.bottom-text {
+					// margin-top: 20rpx;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 32dfd88..a596667 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,8 +1,14 @@
+<!-- 首页 -->
 <template>
 	<view class="index">
 		<Title />
 		<view class="tab">
-			<view class="tab-item" v-for="item in tabList" :key="item.id" :style="`background-color: ${item.color};`">
+			<view 
+				class="tab-item" 
+				v-for="item in tabList" 
+				:key="item.id" 
+				:style="`background-color: ${item.color};`"
+				@click="handleClick(item.id)">
 				<image style="width: 60rpx;height: 60rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
 				<text class="grid-text">{{item.name}}</text>
 			</view>
@@ -90,11 +96,48 @@
 				]
 			}
 		},
-		onLoad() {
-
+		mounted(){
+			uni.showShareMenu({
+				withShareTicket: true,
+				menus: ["shareAppMessage", "shareTimeline"]
+			});
+		},
+		//分享好友
+		onShareAppMessage() {
+			return {
+				title: '新疆网络举报',
+				imageUrl: '../../static/share.png',
+			};
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '新疆网络举报',
+			}
 		},
 		methods: {
-
+			handleClick(val) {
+				console.log('---', val)
+				if(val === 'center') {
+					wx.switchTab({
+						url: '/pages/center/center'
+					})
+				} else if(val === 'guide') {
+					wx.switchTab({
+						url: '/pages/guide/guide'
+					})
+				} else if(val === 'rule' || val === 'status' || val === 'net') {
+					let tabIndex = 0;
+					if(val === 'status') {
+						tabIndex = 1;
+					} else if(val === 'net') {
+						tabIndex = 2;
+					}
+					wx.navigateTo({
+						url: `/pages/messageList/messageList?tabIndex=${tabIndex}`
+					})
+				}
+			}
 		}
 	}
 </script>

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4c992f9..8d81030 100644
--- a/pages.json
+++ b/pages.json
@@ -32,7 +32,23 @@
 					"navigationBarTitleText": "我的",
 					"enablePullDownRefresh": false
 				}      
-      }
+      },
+			{
+				"path" : "pages/messageList/messageList",
+				"style" :                                                                                    
+				{
+					"navigationBarTitleText": "网信信息列表",
+					"enablePullDownRefresh": true
+				}    
+      },
+			{
+				"path" : "pages/messageDetail/messageDetail",
+				"style" :                                                                                    
+				{
+						"navigationBarTitleText": "网信信息详情",
+						"enablePullDownRefresh": false
+				}	
+			}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e083b1..5e3baea 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,11 +1,22 @@
 <template>
-	<view>
-		举报中心
+	<view class="center">
+		<Title />
+		<view class="back">
+			<view class="main">
+				<text>网络安全为人民</text>
+				<text class="bottom-text">网络安全靠人民</text>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import Title from '../../components/base/title.vue';
 	export default {
+		name: 'center',
+		components: {
+			Title
+		},
 		data() {
 			return {
 				
@@ -17,6 +28,28 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.center {
+		width: 100%;
+		height: 100%;
+		padding-top: 160rpx;
+		.back {
+			padding: 40rpx;
+			.main {
+				display: flex;
+				flex-direction: column;
+				// justify-content: center;
+				align-items: center;
+				background: linear-gradient(to right, #153164 0%, #0f4ae0 100%);
+				color: #fff;
+				font-weight: 600;
+				letter-spacing: 20rpx;
+				border-radius: 20rpx;
+				padding: 20rpx 0;
+				.bottom-text {
+					// margin-top: 20rpx;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 32dfd88..a596667 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,8 +1,14 @@
+<!-- 首页 -->
 <template>
 	<view class="index">
 		<Title />
 		<view class="tab">
-			<view class="tab-item" v-for="item in tabList" :key="item.id" :style="`background-color: ${item.color};`">
+			<view 
+				class="tab-item" 
+				v-for="item in tabList" 
+				:key="item.id" 
+				:style="`background-color: ${item.color};`"
+				@click="handleClick(item.id)">
 				<image style="width: 60rpx;height: 60rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
 				<text class="grid-text">{{item.name}}</text>
 			</view>
@@ -90,11 +96,48 @@
 				]
 			}
 		},
-		onLoad() {
-
+		mounted(){
+			uni.showShareMenu({
+				withShareTicket: true,
+				menus: ["shareAppMessage", "shareTimeline"]
+			});
+		},
+		//分享好友
+		onShareAppMessage() {
+			return {
+				title: '新疆网络举报',
+				imageUrl: '../../static/share.png',
+			};
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '新疆网络举报',
+			}
 		},
 		methods: {
-
+			handleClick(val) {
+				console.log('---', val)
+				if(val === 'center') {
+					wx.switchTab({
+						url: '/pages/center/center'
+					})
+				} else if(val === 'guide') {
+					wx.switchTab({
+						url: '/pages/guide/guide'
+					})
+				} else if(val === 'rule' || val === 'status' || val === 'net') {
+					let tabIndex = 0;
+					if(val === 'status') {
+						tabIndex = 1;
+					} else if(val === 'net') {
+						tabIndex = 2;
+					}
+					wx.navigateTo({
+						url: `/pages/messageList/messageList?tabIndex=${tabIndex}`
+					})
+				}
+			}
 		}
 	}
 </script>
diff --git a/pages/messageDetail/messageDetail.vue b/pages/messageDetail/messageDetail.vue
new file mode 100644
index 0000000..4bbd456
--- /dev/null
+++ b/pages/messageDetail/messageDetail.vue
@@ -0,0 +1,78 @@
+<!-- 页面：网信信息详情 -->
+<template>
+	<view class="message-detail">
+		<view class="title">{{title}}</view>
+		<view class="time">{{time}}</view>
+		<view class="time source">来源：{{ source}}</view>
+		<view class="line"></view>
+		<view class="content" v-for="(item, index) in content" :key="index">
+			<image src="../../static/share.png" style="width: 100%;height: 260rpx;flex-shrink: 0;" mode=""></image>
+			<view class="text">{{item.value}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '深刻的监控设备VS大V和SVis道具欧式是OSID剧哦SV',
+				time: '2022-12-12 12:12:12',
+				source: '某某某工作室',
+				content: [
+					{
+						img: '../../static/share.png',
+						value: '阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,'
+					},
+					{
+						img: '../../static/share.png',
+						value: '阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,'
+					},
+				]
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.message-detail {
+		padding: 40rpx;
+		background-color: #fff;
+		height: 100%;
+		// 标题
+		.title {
+			font-size: 38rpx;
+			color: #000;
+			font-weight: 600;
+		}
+		// 时间
+		.time {
+			font-size: 28rpx;
+			color: #a4a4a4;
+			margin-top: 44rpx;
+		}
+		// 来源
+		.source {
+			margin-top: 8rpx;
+		}
+		// 分割线
+		.line {
+			width: 100%;
+			height: 1rpx;
+			background-color: #eeeeee;
+			margin: 46rpx 0;
+		}
+		// 内容
+		.content {
+			.text {
+				margin: 32rpx 0;
+				font-weight: 32rpx;
+				line-height: 58rpx;
+				text-indent: 64rpx; //缩进
+			}
+		}
+	}
+</style>

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4c992f9..8d81030 100644
--- a/pages.json
+++ b/pages.json
@@ -32,7 +32,23 @@
 					"navigationBarTitleText": "我的",
 					"enablePullDownRefresh": false
 				}      
-      }
+      },
+			{
+				"path" : "pages/messageList/messageList",
+				"style" :                                                                                    
+				{
+					"navigationBarTitleText": "网信信息列表",
+					"enablePullDownRefresh": true
+				}    
+      },
+			{
+				"path" : "pages/messageDetail/messageDetail",
+				"style" :                                                                                    
+				{
+						"navigationBarTitleText": "网信信息详情",
+						"enablePullDownRefresh": false
+				}	
+			}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e083b1..5e3baea 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,11 +1,22 @@
 <template>
-	<view>
-		举报中心
+	<view class="center">
+		<Title />
+		<view class="back">
+			<view class="main">
+				<text>网络安全为人民</text>
+				<text class="bottom-text">网络安全靠人民</text>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import Title from '../../components/base/title.vue';
 	export default {
+		name: 'center',
+		components: {
+			Title
+		},
 		data() {
 			return {
 				
@@ -17,6 +28,28 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.center {
+		width: 100%;
+		height: 100%;
+		padding-top: 160rpx;
+		.back {
+			padding: 40rpx;
+			.main {
+				display: flex;
+				flex-direction: column;
+				// justify-content: center;
+				align-items: center;
+				background: linear-gradient(to right, #153164 0%, #0f4ae0 100%);
+				color: #fff;
+				font-weight: 600;
+				letter-spacing: 20rpx;
+				border-radius: 20rpx;
+				padding: 20rpx 0;
+				.bottom-text {
+					// margin-top: 20rpx;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 32dfd88..a596667 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,8 +1,14 @@
+<!-- 首页 -->
 <template>
 	<view class="index">
 		<Title />
 		<view class="tab">
-			<view class="tab-item" v-for="item in tabList" :key="item.id" :style="`background-color: ${item.color};`">
+			<view 
+				class="tab-item" 
+				v-for="item in tabList" 
+				:key="item.id" 
+				:style="`background-color: ${item.color};`"
+				@click="handleClick(item.id)">
 				<image style="width: 60rpx;height: 60rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
 				<text class="grid-text">{{item.name}}</text>
 			</view>
@@ -90,11 +96,48 @@
 				]
 			}
 		},
-		onLoad() {
-
+		mounted(){
+			uni.showShareMenu({
+				withShareTicket: true,
+				menus: ["shareAppMessage", "shareTimeline"]
+			});
+		},
+		//分享好友
+		onShareAppMessage() {
+			return {
+				title: '新疆网络举报',
+				imageUrl: '../../static/share.png',
+			};
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '新疆网络举报',
+			}
 		},
 		methods: {
-
+			handleClick(val) {
+				console.log('---', val)
+				if(val === 'center') {
+					wx.switchTab({
+						url: '/pages/center/center'
+					})
+				} else if(val === 'guide') {
+					wx.switchTab({
+						url: '/pages/guide/guide'
+					})
+				} else if(val === 'rule' || val === 'status' || val === 'net') {
+					let tabIndex = 0;
+					if(val === 'status') {
+						tabIndex = 1;
+					} else if(val === 'net') {
+						tabIndex = 2;
+					}
+					wx.navigateTo({
+						url: `/pages/messageList/messageList?tabIndex=${tabIndex}`
+					})
+				}
+			}
 		}
 	}
 </script>
diff --git a/pages/messageDetail/messageDetail.vue b/pages/messageDetail/messageDetail.vue
new file mode 100644
index 0000000..4bbd456
--- /dev/null
+++ b/pages/messageDetail/messageDetail.vue
@@ -0,0 +1,78 @@
+<!-- 页面：网信信息详情 -->
+<template>
+	<view class="message-detail">
+		<view class="title">{{title}}</view>
+		<view class="time">{{time}}</view>
+		<view class="time source">来源：{{ source}}</view>
+		<view class="line"></view>
+		<view class="content" v-for="(item, index) in content" :key="index">
+			<image src="../../static/share.png" style="width: 100%;height: 260rpx;flex-shrink: 0;" mode=""></image>
+			<view class="text">{{item.value}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '深刻的监控设备VS大V和SVis道具欧式是OSID剧哦SV',
+				time: '2022-12-12 12:12:12',
+				source: '某某某工作室',
+				content: [
+					{
+						img: '../../static/share.png',
+						value: '阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,'
+					},
+					{
+						img: '../../static/share.png',
+						value: '阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,'
+					},
+				]
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.message-detail {
+		padding: 40rpx;
+		background-color: #fff;
+		height: 100%;
+		// 标题
+		.title {
+			font-size: 38rpx;
+			color: #000;
+			font-weight: 600;
+		}
+		// 时间
+		.time {
+			font-size: 28rpx;
+			color: #a4a4a4;
+			margin-top: 44rpx;
+		}
+		// 来源
+		.source {
+			margin-top: 8rpx;
+		}
+		// 分割线
+		.line {
+			width: 100%;
+			height: 1rpx;
+			background-color: #eeeeee;
+			margin: 46rpx 0;
+		}
+		// 内容
+		.content {
+			.text {
+				margin: 32rpx 0;
+				font-weight: 32rpx;
+				line-height: 58rpx;
+				text-indent: 64rpx; //缩进
+			}
+		}
+	}
+</style>
diff --git a/pages/messageList/messageList.vue b/pages/messageList/messageList.vue
new file mode 100644
index 0000000..871de1a
--- /dev/null
+++ b/pages/messageList/messageList.vue
@@ -0,0 +1,205 @@
+<!-- 网信信息列表 -->
+<template>
+	<view class="message-list">
+		<view class="tab-area">
+			<u-tabs 
+				:list="tabList" 
+				:scrollable="false" 
+				:current="currentTab"
+				lineColor="#0096e0"
+				lineWidth="50"
+				lineHeight="5"
+				@click="clickTab">
+			</u-tabs>
+		</view>
+		
+		<view class="event-area">
+			<EventList :list="eventList"/>
+		</view>
+		<u-loadmore :status="status" />
+		<!-- 返回顶部 -->
+		<u-back-top 
+			:scroll-top="scrollTop" 
+			icon="arrow-up" 
+		></u-back-top>
+	</view>
+</template>
+
+<script>
+	import EventList from '../../components/index/eventList.vue';
+	import { getLocationParams } from '../../common/utils.js';
+	export default {
+		name: 'MessageList',
+		components: {
+			EventList
+		},
+		data() {
+			return {
+				scrollTop: 0,
+				currentTab: '0', //当前选中的标签的索引
+				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				tabList: [
+					{
+						name: '法律法规'
+					},
+					{
+						name: '工作动态'
+					},
+					{
+						name: '网络辟谣'
+					},
+				],
+				eventList: [{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},],  //事件数据
+			}
+		},
+		mounted() {
+			this.currentTab = getLocationParams('tabIndex');
+			this.clickTab(null, this.currentTab);
+		},
+		// 监听滚动条位置
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			console.log('refresh');
+			setTimeout(function () {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		//上滑加载
+		onReachBottom() {
+			
+		},
+		methods: {
+			clickTab(val, currentTab) {
+				console.log(val)
+				if((val && val.index === 0) || currentTab === '0') {
+					this.eventList = [
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+					]
+				} else if((val && val.index === 1) || currentTab === '1') {
+					this.eventList = [
+						{
+							title: '工作动态',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '工作动态工作动态工作动态工作动态工作动态工作动态',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '工作动态工作动态工作动态',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+					]
+				} else if((val && val.index === 2) || currentTab === '2') {
+					this.eventList = [
+						{
+							title: '网络辟谣',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '网络辟谣网络辟谣网络辟谣网络辟谣',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '网络辟谣网络辟谣网络辟谣',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+					]
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.message-list {
+		padding-bottom: 40rpx;
+		.tab-area {
+			padding: 20rpx;
+			background-color: #fff;
+		}
+	}
+
+</style>
\ No newline at end of file

diff --git a/common/utils.js b/common/utils.js
new file mode 100644
index 0000000..126f531
--- /dev/null
+++ b/common/utils.js
@@ -0,0 +1,249 @@
+const isType = function (type) {
+  return function (arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`;
+  };
+};
+
+export const isFunction = isType('Function');
+
+export const isObject = isType('Object');
+
+export const isString = isType('String');
+
+export const isArray = isType('Array');
+
+export const isDate = isType('Date');
+
+/**
+ * 为10以内的数字补0
+ */
+export function addZero(n) {
+  if (n >= 10) {
+    return n + '';
+  } else if (n < 10 && n >= 0) {
+    return '0' + n;
+  } else {
+    return n;
+  }
+}
+
+// 数组去重
+export function uniqueArray(arr) {
+  return [...new Set(arr)];
+}
+
+// 节流
+export function throttle(fn, delay = 200) {
+
+  let isThrottled = false;
+  let saveArgs = null;
+  let saveThis = null;
+
+  return function wrapper(...args) {
+    if (isThrottled) {
+      saveArgs = args;
+      saveThis = this;
+      return;
+    }
+
+    isThrottled = true;
+    fn.apply(this, args);
+
+    setTimeout(() => {
+      isThrottled = false;
+      if (saveArgs) {
+        wrapper.apply(saveThis, saveArgs);
+        saveArgs = saveThis = null;
+      }
+    }, delay);
+  }
+}
+
+// 防抖
+export function debounce(fn, delay = 200) {
+  let timer = null;
+
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 获取页面URL参数
+export function getLocationParams(name) {
+  const pages = getCurrentPages();
+  const curPage = pages[pages.length - 1];
+  return name ? curPage.options[name] : curPage.options;
+}
+
+export function stringToDate(str) {
+  // 字符串必需符合以下规则：
+  // 按照年月日时分秒顺序；
+  // 至少需指定到日，日与时之间需要加空格；
+  // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
+  // 例如如：2018-01-2 00:0:3，2018年2月20日 12时30，2018-2-1。
+  const reg = /^(\d{1,4})\D(0[^0]|1[012]|[^0])\D(0[^0]|[12]\d|3[01]|[^0])(?:[^\d\s])?(?:\s|$)(?:([01]\d|2[0-3]|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:([0-5]\d|[^0])|$)(?:\D|$)(?:(\d{1,3})|$)\D?$/;
+  if (!reg.test(str)) {
+    throw new Error('字符串格式错误');
+  }
+  let year = 0, month = 0, day = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+  str.replace(reg, (...arg) => {
+    year = Number(arg[1]);
+    month = Number(arg[2]) - 1;
+    day = Number(arg[3]);
+    if (arg[4]) {
+      hours = Number(arg[4]);
+    }
+    if (arg[5]) {
+      minutes = Number(arg[5]);
+    }
+    if (arg[6]) {
+      seconds = Number(arg[6]);
+    }
+    if (arg[7]) {
+      milliseconds = Number(arg[7]);
+    }
+  });
+  return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+}
+
+/**
+ * 将时间转换成字符串
+ *
+ * format可选格式：
+ * yyyy替换年，MM替换月，dd替换天，HH替换时，mm替换分，ss替换秒，都可缺省
+ * 中间的间隔单位只能使用一个字符，单位都可缺省
+ * 例如：yyyy年MM月dd日 HH时mm分ss秒，yyyy-MM-dd HH:mm:ss，MM dd HH, yyyyMMdd
+ */
+export function dateToString(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  if (!isDate(date)) {
+    throw new Error("第一个参数请传入Date类型");
+  }
+  const reg = /^(y{4})?[^yMdHms]?(M{2})?[^yMdHms]?(d{2})?[^yMdHms]?\s?(H{2})?[^yMdHms]?(m{2})?[^yMdHms]?(s{2})?[^yMdHms]?$/;
+  if (!reg.test(format)) {
+    throw new Error("第二个参数请传入yyyy-MM-dd HH:mm:ss格式的字符串");
+  }
+  format = format.replace(reg, (...arg) => {
+    let match = arg[0];
+    if (arg[1]) {
+      let year = date.getFullYear();
+      match = match.replace(arg[1] + "", year + "");
+    }
+    if (arg[2]) {
+      let month = addZero(date.getMonth() + 1);
+      match = match.replace(arg[2] + "", month);
+    }
+    if (arg[3]) {
+      let day = addZero(date.getDate());
+      match = match.replace(arg[3] + "", day);
+    }
+    if (arg[4]) {
+      let hour = addZero(date.getHours());
+      match = match.replace(arg[4] + "", hour);
+    }
+    if (arg[5]) {
+      let min = addZero(date.getMinutes());
+      match = match.replace(arg[5] + "", min);
+    }
+    if (arg[6]) {
+      let second = addZero(date.getSeconds());
+      match = match.replace(arg[6] + "", second);
+    }
+    return match;
+  });
+  return format;
+}
+
+/**
+ * 格式化时间格式字符串
+ * 字符串规则以及format规则同stringToDate，dateToString函数
+ */
+export function formatDateString(str, format) {
+  return dateToString(stringToDate(str), format);
+}
+
+export function timeToNow(time) {
+  const dValue = Date.now() - stringToDate(time).valueOf();
+  const minutes = dValue / 1000 / 60;
+  const hour = minutes / 60;
+  const day = hour / 24;
+  const month = day / 30;
+  let val = '';
+  if (minutes < 1) {
+    val = "刚刚";
+  } else if (minutes < 60) {
+    val = Math.round(minutes) + "分钟前";
+  } else if (hour < 24) {
+    val = Math.round(hour) + "小时前";
+  } else if (month < 1) {
+    val = Math.round(day) + "天前";
+  } else {
+    val = Math.round(month) + "月前";
+  }
+  return val;
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToDate(time) {
+  // let time = time.split('-').join('/');
+  if (time.indexOf(' ') !== -1) {
+    return time.slice(0, time.indexOf(' '));
+  } else {
+    return time;
+  }
+}
+
+//时间截取日期2021-12-22 13:12:12 截取成为2021-12-12
+export function timeToTime(time) {
+  return time.slice(11, 16);
+}
+
+//时间戳格式化 2019-08-26 形式
+export function stamp2Date(value) {
+  var b = new Date(value);
+  var year = b.getFullYear() + '-';
+  var month = (b.getMonth() + 1);
+  var date = b.getDate();
+  month = month < 10 ? '0' + (b.getMonth() + 1) + '-' : (b.getMonth() + 1) + '-';
+  date = date < 10 ? '0' + (b.getDate()) : date;
+  var str = String(year) + String(month) + String(date) + '';
+  return str;
+}
+
+//深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data;
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item));
+  } else if (isObject(data)) {
+    let ret = {};
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key]);
+    });
+    return ret;
+  }
+}
+
+
+/**
+ * 生成一个唯一的字符串ID，每次执行结果必定不一样
+ */
+export function getUid() {
+  const random = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let str = "";
+  for (let i = 0; i < 4; i++) {
+    str += random[getRandom(0, 35)];
+  }
+  return new Date().valueOf() + str;
+}
+
+/**
+ * 生成 n - m 之间的随机数
+ */
+export function getRandom(n, m) {
+  return Math.floor(Math.random() * (m - n + 1) + n);
+}
+
diff --git a/common/variables.scss b/common/variables.scss
new file mode 100644
index 0000000..95f6f99
--- /dev/null
+++ b/common/variables.scss
@@ -0,0 +1,22 @@
+$active-color: #eaebee;
+
+
+//超出n行...
+@mixin exceeding-line-overflow($num) {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  word-wrap: break-word;
+  -webkit-word-break: break-word;
+  word-break: break-word;
+}
+
+//超出...
+@mixin exceed-point($width) {
+  max-width: $width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/components/index/eventList.vue b/components/index/eventList.vue
new file mode 100644
index 0000000..7d3ac6d
--- /dev/null
+++ b/components/index/eventList.vue
@@ -0,0 +1,72 @@
+<!-- 组件：事件列表 -->
+<template>
+	<view class="event-list">
+		<view class="event-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
+			<view class="left">
+				<text class="title">{{item.title}}</text>
+				<text class="time">{{item.time}}</text>
+			</view>
+			<image :src="item.img" style="width: 280rpx;height: 200rpx;flex-shrink: 0;" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'EventList',
+		props: {
+			list: Array,
+			default: () => []
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClick(val) {
+				wx.navigateTo({
+					url: `/pages/messageDetail/messageDetail`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../common/variables.scss';
+	.event-list {
+		width: 100%;
+		box-sizing: border-box;
+		.event-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 240rpx;
+			padding: 20rpx 32rpx;
+			background-color: #fff;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.left {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-right: 20rpx;
+				.title {
+					font-size: 32rpx;
+					color: #000;
+					@include exceeding-line-overflow(3);
+				}
+				.time {
+					font-size: 28rpx;
+					color: #c1c1c1;
+				}
+			}
+			.right {
+				width: 100rpx;
+				height: 100rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4c992f9..8d81030 100644
--- a/pages.json
+++ b/pages.json
@@ -32,7 +32,23 @@
 					"navigationBarTitleText": "我的",
 					"enablePullDownRefresh": false
 				}      
-      }
+      },
+			{
+				"path" : "pages/messageList/messageList",
+				"style" :                                                                                    
+				{
+					"navigationBarTitleText": "网信信息列表",
+					"enablePullDownRefresh": true
+				}    
+      },
+			{
+				"path" : "pages/messageDetail/messageDetail",
+				"style" :                                                                                    
+				{
+						"navigationBarTitleText": "网信信息详情",
+						"enablePullDownRefresh": false
+				}	
+			}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e083b1..5e3baea 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,11 +1,22 @@
 <template>
-	<view>
-		举报中心
+	<view class="center">
+		<Title />
+		<view class="back">
+			<view class="main">
+				<text>网络安全为人民</text>
+				<text class="bottom-text">网络安全靠人民</text>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import Title from '../../components/base/title.vue';
 	export default {
+		name: 'center',
+		components: {
+			Title
+		},
 		data() {
 			return {
 				
@@ -17,6 +28,28 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.center {
+		width: 100%;
+		height: 100%;
+		padding-top: 160rpx;
+		.back {
+			padding: 40rpx;
+			.main {
+				display: flex;
+				flex-direction: column;
+				// justify-content: center;
+				align-items: center;
+				background: linear-gradient(to right, #153164 0%, #0f4ae0 100%);
+				color: #fff;
+				font-weight: 600;
+				letter-spacing: 20rpx;
+				border-radius: 20rpx;
+				padding: 20rpx 0;
+				.bottom-text {
+					// margin-top: 20rpx;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 32dfd88..a596667 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,8 +1,14 @@
+<!-- 首页 -->
 <template>
 	<view class="index">
 		<Title />
 		<view class="tab">
-			<view class="tab-item" v-for="item in tabList" :key="item.id" :style="`background-color: ${item.color};`">
+			<view 
+				class="tab-item" 
+				v-for="item in tabList" 
+				:key="item.id" 
+				:style="`background-color: ${item.color};`"
+				@click="handleClick(item.id)">
 				<image style="width: 60rpx;height: 60rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
 				<text class="grid-text">{{item.name}}</text>
 			</view>
@@ -90,11 +96,48 @@
 				]
 			}
 		},
-		onLoad() {
-
+		mounted(){
+			uni.showShareMenu({
+				withShareTicket: true,
+				menus: ["shareAppMessage", "shareTimeline"]
+			});
+		},
+		//分享好友
+		onShareAppMessage() {
+			return {
+				title: '新疆网络举报',
+				imageUrl: '../../static/share.png',
+			};
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '新疆网络举报',
+			}
 		},
 		methods: {
-
+			handleClick(val) {
+				console.log('---', val)
+				if(val === 'center') {
+					wx.switchTab({
+						url: '/pages/center/center'
+					})
+				} else if(val === 'guide') {
+					wx.switchTab({
+						url: '/pages/guide/guide'
+					})
+				} else if(val === 'rule' || val === 'status' || val === 'net') {
+					let tabIndex = 0;
+					if(val === 'status') {
+						tabIndex = 1;
+					} else if(val === 'net') {
+						tabIndex = 2;
+					}
+					wx.navigateTo({
+						url: `/pages/messageList/messageList?tabIndex=${tabIndex}`
+					})
+				}
+			}
 		}
 	}
 </script>
diff --git a/pages/messageDetail/messageDetail.vue b/pages/messageDetail/messageDetail.vue
new file mode 100644
index 0000000..4bbd456
--- /dev/null
+++ b/pages/messageDetail/messageDetail.vue
@@ -0,0 +1,78 @@
+<!-- 页面：网信信息详情 -->
+<template>
+	<view class="message-detail">
+		<view class="title">{{title}}</view>
+		<view class="time">{{time}}</view>
+		<view class="time source">来源：{{ source}}</view>
+		<view class="line"></view>
+		<view class="content" v-for="(item, index) in content" :key="index">
+			<image src="../../static/share.png" style="width: 100%;height: 260rpx;flex-shrink: 0;" mode=""></image>
+			<view class="text">{{item.value}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '深刻的监控设备VS大V和SVis道具欧式是OSID剧哦SV',
+				time: '2022-12-12 12:12:12',
+				source: '某某某工作室',
+				content: [
+					{
+						img: '../../static/share.png',
+						value: '阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,'
+					},
+					{
+						img: '../../static/share.png',
+						value: '阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,阿萨斯多阿斯傻傻的澳双方奥安徽师范啊同时符合澳双方,'
+					},
+				]
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.message-detail {
+		padding: 40rpx;
+		background-color: #fff;
+		height: 100%;
+		// 标题
+		.title {
+			font-size: 38rpx;
+			color: #000;
+			font-weight: 600;
+		}
+		// 时间
+		.time {
+			font-size: 28rpx;
+			color: #a4a4a4;
+			margin-top: 44rpx;
+		}
+		// 来源
+		.source {
+			margin-top: 8rpx;
+		}
+		// 分割线
+		.line {
+			width: 100%;
+			height: 1rpx;
+			background-color: #eeeeee;
+			margin: 46rpx 0;
+		}
+		// 内容
+		.content {
+			.text {
+				margin: 32rpx 0;
+				font-weight: 32rpx;
+				line-height: 58rpx;
+				text-indent: 64rpx; //缩进
+			}
+		}
+	}
+</style>
diff --git a/pages/messageList/messageList.vue b/pages/messageList/messageList.vue
new file mode 100644
index 0000000..871de1a
--- /dev/null
+++ b/pages/messageList/messageList.vue
@@ -0,0 +1,205 @@
+<!-- 网信信息列表 -->
+<template>
+	<view class="message-list">
+		<view class="tab-area">
+			<u-tabs 
+				:list="tabList" 
+				:scrollable="false" 
+				:current="currentTab"
+				lineColor="#0096e0"
+				lineWidth="50"
+				lineHeight="5"
+				@click="clickTab">
+			</u-tabs>
+		</view>
+		
+		<view class="event-area">
+			<EventList :list="eventList"/>
+		</view>
+		<u-loadmore :status="status" />
+		<!-- 返回顶部 -->
+		<u-back-top 
+			:scroll-top="scrollTop" 
+			icon="arrow-up" 
+		></u-back-top>
+	</view>
+</template>
+
+<script>
+	import EventList from '../../components/index/eventList.vue';
+	import { getLocationParams } from '../../common/utils.js';
+	export default {
+		name: 'MessageList',
+		components: {
+			EventList
+		},
+		data() {
+			return {
+				scrollTop: 0,
+				currentTab: '0', //当前选中的标签的索引
+				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				tabList: [
+					{
+						name: '法律法规'
+					},
+					{
+						name: '工作动态'
+					},
+					{
+						name: '网络辟谣'
+					},
+				],
+				eventList: [{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},],  //事件数据
+			}
+		},
+		mounted() {
+			this.currentTab = getLocationParams('tabIndex');
+			this.clickTab(null, this.currentTab);
+		},
+		// 监听滚动条位置
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			console.log('refresh');
+			setTimeout(function () {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		//上滑加载
+		onReachBottom() {
+			
+		},
+		methods: {
+			clickTab(val, currentTab) {
+				console.log(val)
+				if((val && val.index === 0) || currentTab === '0') {
+					this.eventList = [
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '法律法规法律法规法律法规法律法规',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+					]
+				} else if((val && val.index === 1) || currentTab === '1') {
+					this.eventList = [
+						{
+							title: '工作动态',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '工作动态工作动态工作动态工作动态工作动态工作动态',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '工作动态工作动态工作动态',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+					]
+				} else if((val && val.index === 2) || currentTab === '2') {
+					this.eventList = [
+						{
+							title: '网络辟谣',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '网络辟谣网络辟谣网络辟谣网络辟谣',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+						{
+							title: '网络辟谣网络辟谣网络辟谣',
+							time: '2121-12-12 12:02:20',
+							img: '../../static/share.png'
+						},
+					]
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.message-list {
+		padding-bottom: 40rpx;
+		.tab-area {
+			padding: 20rpx;
+			background-color: #fff;
+		}
+	}
+
+</style>
\ No newline at end of file
diff --git a/static/share.png b/static/share.png
new file mode 100644
index 0000000..d95df9e
--- /dev/null
+++ b/static/share.png
Binary files differ