代码初始化

.env.development

@@ -0,0 +1,6 @@
+# 开发环境配置
+NODE_ENV=development
+VITE_APP_TITLE=开发环境
+VITE_API_BASE_URL=/yyfw
+VITE_AES_KEY=3a7b9c2d5e8f1a4b6c9d8e7f5a3b2c1d
+VITE_ENABLE_VCONSOLE=true

.env.production

@@ -0,0 +1,6 @@
+# 生产环境配置
+NODE_ENV=production
+VITE_APP_TITLE=生产环境
+VITE_API_BASE_URL=https://aioblu.cpic.com.cn/yyfw
+VITE_AES_KEY=3a7b9c2d5e8f1a4b6c9d8e7f5a3b2c1d
+VITE_ENABLE_VCONSOLE=false

.env.sit

@@ -0,0 +1,6 @@
+# SIT 测试环境配置
+NODE_ENV=sit
+VITE_APP_TITLE=SIT测试环境
+VITE_API_BASE_URL=https://aioblu-sit.cpic.com.cn/yyfw
+VITE_AES_KEY=3a7b9c2d5e8f1a4b6c9d8e7f5a3b2c1d
+VITE_ENABLE_VCONSOLE=true

.env.test

@@ -0,0 +1,7 @@
+# 开发环境配置
+NODE_ENV=development
+VITE_APP_TITLE=开发环境
+VITE_API_BASE_URL=/yyfw
+VITE_AES_KEY=3a7b9c2d5e8f1a4b6c9d8e7f5a3b2c1d
+VITE_ENABLE_VCONSOLE=true
+VITE_ENABLE_TEST=true

.gitignore

@@ -0,0 +1,41 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+.omx/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

README.md

@@ -0,0 +1,49 @@
+# chat
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### 注意事项
+```sh
+开发使用二倍图标注rem单位适配
+```
+### 性别判断
+```sh
+根据证件号码判断性别
+身份证(a)、户口本(m)、临时身份证(k)、港澳台居住证(r) ✅ 能
+护照(c)、军官证(d)、外国人永久居留身份证(q)、港澳通行证(j)、台湾通行证(l)、出生证明(o)、往来港澳通行证(u)、其他(i) ❌ 不能
+```

index.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <title>小蓝理赔</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
+    <script>
+      ;(function () {})()
+    </script>
+  </body>
+</html>
+<style>
+  html {
+    text-size-adjust: 100% !important;
+    -webkit-text-size-adjust: 100% !important;
+    -moz-text-size-adjust: 100% !important;
+  }
+
+  html,
+  body {
+    overscroll-behavior: none;
+    /* 禁止整个页面的回弹 */
+    height: 100%;
+    overflow: hidden;
+    /* 防止 body 自身滚动 */
+  }
+
+  * {
+    box-sizing: border-box;
+    word-break: break-all;
+  }
+
+  .van-cell__title,
+  .van-cell__value,
+  .van-picker-column__item,
+  .van-cascader__option,
+  .van-tab,
+  .van-cascader__title,
+  input {
+    font-size: 28rem;
+  }
+
+  .van-checkbox__icon {
+    height: initial;
+    min-height: 1em;
+  }
+
+  [class*='van-hairline']:after {
+    border-width: 0;
+  }
+
+  .van-cascader__title {
+    line-height: normal;
+  }
+
+  .van-field__error-message {
+    text-align: right;
+    color: #ff5257;
+    font-weight: normal;
+    font-size: 24rem;
+  }
+
+  :root:root {
+    --van-field-placeholder-text-color: #7e849f;
+    --van-tab-active-text-color: #025cea;
+    --van-padding-sm: 8px;
+  }
+
+  .van-cell__right-icon {
+    line-height: 48rem;
+    height: 48rem;
+  }
+
+  .van-cell {
+    align-items: center;
+  }
+
+  .van-tab--grow {
+    border-bottom: 2rem solid #ebedf0;
+  }
+</style>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "chat",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "dev:test": "vite --mode test --host",
+    "dev:sit": "vite --mode sit --host",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "build:sit": "vite build --mode sit",
+    "build:prod": "vite build --mode production",
+    "preview": "vite preview",
+    "format": "prettier --write --experimental-cli src/",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "axios": "^1.14.0",
+    "crypto-js": "^4.2.0",
+    "jsencrypt": "^3.3.2",
+    "lodash": "^4.18.1",
+    "mescroll.js": "^1.4.2",
+    "node-forge": "^1.4.0",
+    "pinia": "^3.0.4",
+    "qs": "^6.15.0",
+    "recorder-core": "^1.3.26070800",
+    "sa-sdk-javascript": "^1.27.14",
+    "signature_pad": "^5.1.3",
+    "sm-crypto": "^0.5.7",
+    "vant": "^4.9.24",
+    "vconsole": "^3.15.1",
+    "vue": "^3.5.31",
+    "vue-router": "^4.2.5",
+    "vue3-lazyload": "^0.4.2",
+    "weixin-js-sdk": "^1.6.5",
+    "xss": "^1.0.15"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.12",
+    "prettier": "3.8.1",
+    "sass": "^1.104.1",
+    "sass-loader": "^17.0.1",
+    "vite": "^7.0.0",
+    "vite-plugin-fake-server": "^2.2.3",
+    "vite-plugin-vue-devtools": "^8.1.1"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,14 @@
+export default {
+  plugins: {
+    autoprefixer: {
+      // 指定需要兼容的浏览器范围
+      overrideBrowserslist: [
+        'Android >= 4.0',
+        'iOS >= 8',
+        'last 2 versions',
+        '> 1%',
+        'not dead'
+      ]
+    }
+  }
+}

src/App.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { RouterView, useRoute } from 'vue-router'
+import { onMounted, onUnmounted, provide } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppStore } from '@/store/app.js'
+// import { leaveProject } from '@/utils/api.js'
+import wx from 'weixin-js-sdk'
+const route = useRoute()
+import { isIOS, isAndroid, isPureHarmonyOS, handleFontSize, detectFontSize } from '@/utils/common'
+console.log('navigator.userAgent', navigator.userAgent, navigator.userAgentData)
+window.wx = wx
+
+// 全局 provide 接线：子组件统一通过 inject('appStore') / inject('xxx') 使用 store
+const appStore = useAppStore()
+const appStoreRefs = storeToRefs(appStore)
+provide('appStore', appStore)
+Object.keys(appStoreRefs).forEach((key) => {
+  provide(key, appStoreRefs[key])
+})
+
+const handleGlobalBrowserExit = (reason, extra = {}) => {
+  const payload = {
+    reason,
+    href: window.location.href,
+    route: route.fullPath,
+    timestamp: Date.now(),
+    ...extra,
+  }
+  // leaveProject()
+  // alert('关闭页面')
+
+  console.log('📴 全局检测到浏览器关闭/返回动作', payload)
+
+  // 在这里统一处理关闭浏览器、手势返回、刷新离开等动作。
+  // 如果后续需要接业务方法，直接在这里调用即可。
+  // example:
+  // someBusinessMethod(payload)
+}
+
+const handleBrowserPopState = () => {
+  handleGlobalBrowserExit('popstate')
+}
+
+const handleBrowserPageHide = (event) => {
+  handleGlobalBrowserExit('pagehide', {
+    persisted: Boolean(event?.persisted),
+  })
+}
+
+const handleBrowserBeforeUnload = () => {
+  handleGlobalBrowserExit('beforeunload')
+}
+
+onMounted(() => {
+  var html = document.getElementsByTagName('html')[0]
+
+  // 初始化
+  function init() {
+    console.log('navigator.userAgent', navigator.userAgent, navigator.userAgentData)
+    console.log('handleFontSize called with:', localStorage.getItem('bigFont'))
+    if (localStorage.getItem('bigFont') === 'true')
+      document.getElementsByTagName('html')[0].style.fontSize = '0.79333275px'
+    if (localStorage.getItem('localfontSize'))
+      html.style.fontSize = localStorage.getItem('localfontSize')
+    // 监听WeixinJSBridge
+    if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
+      detectFontSize()
+      handleFontSize()
+    } else {
+      if (document.addEventListener) {
+        document.addEventListener(
+          'WeixinJSBridgeReady',
+          function () {
+            detectFontSize()
+            handleFontSize()
+          },
+          false
+        )
+      } else if (document.attachEvent) {
+        document.attachEvent('WeixinJSBridgeReady', function () {
+          detectFontSize()
+          handleFontSize()
+        })
+      }
+    }
+  }
+  init()
+  console.log(isPureHarmonyOS(), 'isPureHarmonyOS')
+
+  window.onresize = function () {
+    if (!isIOS() && !isAndroid() && !isPureHarmonyOS()) init()
+  }
+
+  window.addEventListener('popstate', handleBrowserPopState)
+  window.addEventListener('pagehide', handleBrowserPageHide)
+  window.addEventListener('beforeunload', handleBrowserBeforeUnload)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('popstate', handleBrowserPopState)
+  window.removeEventListener('pagehide', handleBrowserPageHide)
+  window.removeEventListener('beforeunload', handleBrowserBeforeUnload)
+})
+</script>
+
+<template>
+  <div id="app" class="app-wrapper opacity">
+    <RouterView v-slot="{ Component }">
+      <keep-alive include="chat">
+        <component :is="Component" />
+      </keep-alive>
+    </RouterView>
+  </div>
+</template>
+
+<style scoped>
+.header-box {
+  width: 100%;
+  height: 88rem;
+  display: flex;
+  align-items: center;
+  background: #e8f2ff;
+  padding: 0 24rem 0 54rem;
+}
+
+.view {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-box {
+  display: flex;
+  align-items: center;
+}
+
+.back-icon {
+  display: block;
+  width: 18rem;
+  height: 32rem;
+}
+
+.back-icon img {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<style scoped lang="scss">
+#app {
+  .con {
+    color: red;
+  }
+}
+</style>

src/assets/font/iconfont.css

@@ -0,0 +1,19 @@
+
+@font-face {
+  font-family: "DIN-Medium"; /* Project id  */
+  /* src: url('../font/dinmedium.ttf'); */
+  src: url('dinmedium.ttf');
+}
+
+/* .iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-jiantou:before {
+  content: "\e63c";
+} */
+

src/assets/images/chat/line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="11" height="5.490234375" viewBox="0 0 11 5.490234375">
+  <path d="M9.0632324,2.2391284000000002L7.3132324,0.24889404000000004L6.1867676,1.23938721L7.9367676,3.2296216L8.5971756,3.984375L0.75,3.984375L0.75,5.484375L10.029623,5.484375Q10.5773335,5.484375,10.803659,4.9856119Q11.029985,4.4868467,10.6693134,4.0746459999999995L9.0632324,2.2391284000000002Z" fill-rule="evenodd" fill="#D0D2DB" fill-opacity="1"/>
+</svg>

src/assets/style/base.css

@@ -0,0 +1,109 @@
+.app-header {
+    width: 100%;
+    height: 43px;
+    text-align: center;
+    z-index: 100;
+    position: fixed;
+    top: 0;
+}
+.app-header.wxHeader{
+    height: 0;
+}
+.app-header.isNoticeShow{
+    height: 83px;
+}
+.app-header.wxHeader.isNoticeShow{
+    height: 40px;
+}
+.header-box{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 43px;
+    line-height: 43px;
+    padding: 0 15px;
+    background: #0074e1;
+    color: #fff;
+}
+.m-header-button{
+    width: 50px;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+}
+.m-header-button.is-left{
+    text-align: left;
+}
+.header-back{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    line-height: 100%;
+    color: #fff;
+}
+.icon-back{
+    width: 14px;
+    height: 43px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRjdENUUyMDFDQzMxMUVBODlGODhGN0E1MzFFMERDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRjdENUUyMTFDQzMxMUVBODlGODhGN0E1MzFFMERDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGN0Q1RTFFMUNDMzExRUE4OUY4OEY3QTUzMUUwREM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGN0Q1RTFGMUNDMzExRUE4OUY4OEY3QTUzMUUwREM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FEoIbwAAAKlJREFUeNqs1TEOgDAIBVDBwVN4cc/nCRwdxHYwqU1L4ZcmLia+ABUgEVnA8/uQIxAUaqbAEUg6xBGIJyIVsUJDxAKZkBFkRjTIhfQgN9KCIKSGYKSEppAPmka0WyNvJ6NjZPo/UiGKwHhQE0FSy9iDYnWNVjQy7lz97cVIWUchY8QdGRkWZMioNUdmbZEtPZeGkXP3hyxINU2k+3OaZ9QY2VNJjvLFK8AAmIwyrRG+e5YAAAAASUVORK5CYII=') no-repeat left center;
+    background-size: 9.5px auto;
+}
+.back-tit{
+    padding-top: 3px;
+    font-size: 16px;
+    line-height: 16px;
+}
+.m-header-button.is-right{
+    text-align: right;
+}
+.m-header-title{
+    -ms-flex: 1;
+    flex: 1;
+    text-align: center;
+    font-family: PingFangSC-Medium;
+    font-size: 17px;
+    line-height: 43px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.app-content {
+    -webkit-box-flex:1;
+    -webkit-flex:1;
+    -ms-flex:1;
+    flex:1;
+    width:100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    /*margin-bottom: -50px;*/
+}
+
+.app-content ._full_inner {
+    z-index: 2;
+}
+
+.app-footer {
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: auto;
+    min-height: 54px;
+    line-height: inherit;
+    text-align: center;
+    /* background: #EEF2F8; */
+    position: fixed;
+    z-index: 3;
+    bottom: 0;
+    width: 100%;
+}

src/assets/style/common.css

@@ -0,0 +1,488 @@
+@charset "utf-8";
+/* CSS Document */
+
+/* flex */
+
+.flex {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.flex-v {
+    -webkit-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+.flex-1 {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+.flex-align-center {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.flex-pack-center {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.flex-pack-justify {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+.flex-box {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -moz-box-orient: horizontal;
+    -webkit-box-orient: horizontal;
+    -o-box-orient: horizontal;
+    box-orient: horizontal;
+}
+
+/*遮罩*/
+
+.mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #ebebeb;
+    z-index: 999;
+}
+
+.masks {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 999;
+}
+
+.van-overlay.van-image-preview__overlay {
+    background-color: rgba(0, 0, 0, 1) !important;
+}
+
+.van-overlay {
+    background-color: rgba(0, 0, 0, .35)!important;
+}
+
+.van-toast.van-toast--loading {
+    width: 60px!important;
+    height: 60px!important;
+    min-height: 60px!important;
+}
+
+.van-dialog {
+    width: 75%!important;
+}
+
+#__vconsole .vc-switch {
+    z-index: 100000000000 !important;
+}
+
+body .van-toast--html, body .van-toast--text {
+    max-width: 200px;
+}
+
+#__vconsole .vc-mask, #__vconsole .vc-panel {
+    z-index: 1000000 !important;
+}
+
+.van-picker__toolbar .van-picker__confirm {
+    color: #0074e1;
+}
+
+body .van-popup--bottom {
+    max-width: 9.98rem;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* .van-picker__toolbar{
+    position: relative;
+}
+.van-picker__toolbar::after{
+    content: '';
+    position: absolute;
+    width: 200%;
+    left: 0;
+    bottom: 0;
+    transform: scale(.5);
+    transform-origin: 0 0;
+    -webkit-transform: scale(.5);
+    -webkit-transform-origin: 0 0;
+    background-color: #ddd;
+    height: 1px;
+    z-index: 2;
+} */
+
+/* body .van-image-preview__image{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+body .van-image-preview__image img{
+    width: 70%;
+} */
+
+/*1px线*/
+
+._line-fine:not(:first-child)::before {
+    content: "";
+    position: absolute;
+    width: 200%;
+    left: 0;
+    top: 0;
+    transform: scale(.5);
+    transform-origin: 0 0;
+    -webkit-transform: scale(.5);
+    -webkit-transform-origin: 0 0;
+    background-color: #b7b7b7;
+    height: 1px;
+    z-index: 2;
+}
+
+._line-fine-btn::before {
+    width: 200%;
+    height: 200%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    content: "";
+    -webkit-transform: scale(0.5);
+    -webkit-transform-origin: 0 0;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    border: 1px solid #8EC2FF;
+    border-radius: 82px;
+}
+
+.before-top::before {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid #ddd;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+}
+
+.before-bottom::before {
+    content: " ";
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid #e5e5e5;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+}
+
+.this-news-box {
+    padding-bottom: 18px;
+}
+
+.this-news-tips {
+    font-family: PingFangSC-Regular;
+    font-size: 11px;
+    line-height: 16px;
+    color: #666666;
+    text-align: center;
+    position: relative;
+}
+
+.this-news-tips:after, .this-news-tips:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 85px;
+    border-top: 1px solid #ddd;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+}
+
+.this-news-tips:after {
+    left: 34px;
+}
+
+.this-news-tips:before {
+    right: 34px;
+}
+
+.elder-content .this-news-tips {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    height: 27px;
+    background: rgba(85, 92, 128, 0.10);
+    border-radius: 13px;
+    font-family: PingFangSC-Regular;
+    font-size: 18px;
+    color: #7E849F;
+    text-align: center;
+    line-height: 18px;
+    margin-left: 98px;
+}
+
+.elder-content .this-news-tips:after, .this-news-tips:before {
+    width: 96px;
+}
+
+.elder-content .this-news-tips:after {
+    left: 150px;
+}
+
+.elder-content .this-news-tips:before {
+    right: 150px;
+}
+
+.opacity {
+    -webkit-animation: opacity 0.5s ease-in-out;
+    animation: opacity 0.5s ease-in-out;
+}
+
+@-webkit-keyframes opacity {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes opacity {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.an-move-left {
+    margin-left: 0;
+    animation: moveLeft .5s ease;
+    -webkit-animation: moveLeft .5s ease;
+}
+
+.an-move-right {
+    margin-left: 0;
+    animation: moveRight .5s ease;
+    -webkit-animation: moveRight .5s ease;
+}
+
+.an-move-up {
+    margin-top: 0;
+    animation: moveUp .5s ease;
+    -webkit-animation: moveUp .5s ease;
+}
+
+@keyframes moveRight {
+    0% {
+        margin-left: -20px;
+        opacity: 0
+    }
+    ;
+    100% {
+        margin-left: 0;
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes moveRight {
+    0% {
+        margin-left: -20px;
+        opacity: 0
+    }
+    ;
+    100% {
+        margin-left: 0px;
+        opacity: 1
+    }
+}
+
+@keyframes moveLeft {
+    0% {
+        margin-left: 20px;
+        opacity: 0
+    }
+    ;
+    100% {
+        margin-left: 0px;
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes moveLeft {
+    0% {
+        margin-left: 20px;
+        opacity: 0
+    }
+    ;
+    100% {
+        margin-left: 0px;
+        opacity: 1
+    }
+}
+
+@keyframes moveUp {
+    0% {
+        margin-top: 30px;
+        opacity: 0
+    }
+    ;
+    100% {
+        margin-top: 0px;
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes moveUp {
+    0% {
+        margin-top: 30px;
+        opacity: 0
+    }
+    ;
+    100% {
+        margin-top: 0px;
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes msgLeft {
+    0% {
+        -webkit-transform: translateX(-20px);
+        transform: translateX(-20px);
+        opacity: 0
+    }
+    50% {
+        -webkit-transform: translateX(-20px);
+        transform: translateX(-20px);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1
+    }
+}
+
+@keyframes msgLeft {
+    0% {
+        -webkit-transform: translateX(-20px);
+        transform: translateX(-20px);
+        opacity: 0
+    }
+    50% {
+        -webkit-transform: translateX(-20px);
+        transform: translateX(-20px);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes msgRight {
+    0% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px);
+        opacity: 0
+    }
+    20% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1
+    }
+}
+
+@keyframes msgRight {
+    0% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px);
+        opacity: 0
+    }
+    20% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes slideInRight {
+    0% {
+        -webkit-transform: translateX(100px);
+        transform: translateX(100px);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1
+    }
+}
+
+@keyframes slideInRight {
+    0% {
+        -webkit-transform: translateX(100px);
+        transform: translateX(100px);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1
+    }
+}

src/assets/style/reset.css

@@ -0,0 +1,57 @@
+@charset "utf-8";
+/* CSS Document */
+/*样式重置*/
+body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td{margin:0;padding:0;}
+h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
+ul,dl,ol{list-style:none;}
+img,fieldset,input[type="submit"]{border:0 none;}
+img{display:inline-block;overflow:hidden;vertical-align:top;width: 100%;}
+em,i{font-style:normal;}
+strong{font-weight:normal;}
+table{border-collapse:collapse;border-spacing:0;}
+button,input[type="button"]{cursor:pointer;border:0 none;outline: none;}
+textarea{word-wrap:break-word;resize:none;font-family: 'Avenir', Helvetica, Arial, sans-serif;}  /* word-wrap for opera, resize for webkit */
+menu{margin:0;padding:0;}
+body{-webkit-user-select:none;-webkit-text-size-adjust:100%!important; font-family: "PingFangSC-Regular","Helvetica Neue",Arial,"Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft YaHei",sans-serif; font-size:12px;}
+input[type="number"]{-webkit-user-select:text;}
+a,button,input,img{-webkit-touch-callout:none;outline: none;border: 0;}/* 1.ios 长按时不触发系统的菜单 2.禁止长按时下载图片 */
+input,select,textarea{outline:none;}
+/* 去除android4.0以下 a/button/input标签被点击时产生的边框 因为边框引起了不少bug */
+a,button,input,label{-webkit-tap-highlight-color:rgba(0,0,0,.2);}
+/* Android4.0下不识别选择器-webkit-transform-3d 使用它可做Android4.0下版本兼容 */
+/* android4.0+ ios4+ 恢复按钮被点击时产生的效果 */
+@media all and (-webkit-transform-3d){
+    a,button,input,label{-webkit-tap-highlight-color:rgba(0,0,0,.2);}
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #999;
+  opacity: 0.5;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #999;
+  opacity: 0.5;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #999;
+  opacity: 0.5;
+}
+a{ text-decoration:none;color: #5A9CFF;}
+.hide{ display:none !important;}
+html,body{width: 100%;height: 100%;touch-action: none;overflow: hidden;}
+body{background: #fff;}
+
+
+/*iPhoneX的适配*/
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+    /*添加底部适配*/
+    
+}
+
+@media (min-width: 750px) {
+  html {
+    font-size: 176.25px !important; /* 最大值80px */
+  }
+}