first commit

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["taro/react"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: false
+    }]
+  ]
+}

config/dev.js

@@ -0,0 +1,11 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    esnextModules: ['taro-ui']
+  }
+}

config/index.js

@@ -0,0 +1,70 @@
+const config = {
+  projectName: 'myApp',
+  date: '2021-10-9',
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: [],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'react',
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
+     * 参考代码如下：
+     * webpackChain (chain) {
+     *   chain.plugin('analyzer')
+     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+     * }
+     */
+  }
+}

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "myApp",
+  "version": "1.0.0",
+  "private": true,
+  "description": "first",
+  "templateInfo": {
+    "name": "taro-ui",
+    "typescript": false,
+    "css": "less"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/components": "3.3.3",
+    "@tarojs/react": "3.3.3",
+    "@tarojs/runtime": "3.3.3",
+    "@tarojs/taro": "3.3.3",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "taro-ui": "^3.0.0-alpha.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@tarojs/mini-runner": "3.3.3",
+    "@tarojs/webpack-runner": "3.3.3",
+    "@types/react": "^17.0.2",
+    "@types/webpack-env": "^1.13.6",
+    "babel-preset-taro": "3.3.3",
+    "eslint": "^6.8.0",
+    "eslint-config-taro": "3.3.3",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "stylelint": "9.3.0"
+  }
+}

project.config.json

@@ -0,0 +1,43 @@
+{
+  "miniprogramRoot": "dist/",
+  "projectname": "myApp",
+  "description": "first",
+  "appid": "wx106640ee424b8ea2",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": true,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "useIsolateContext": true,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "showES6CompileOption": false
+  },
+  "compileType": "miniprogram",
+  "condition": {}
+}

project.tt.json

@@ -0,0 +1,9 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "myApp",
+  "appid": "touristappid",
+  "setting": {
+    "es6": false,
+    "minified": false
+  }
+}

src/app.config.js

@@ -0,0 +1,17 @@
+export default {
+  pages: [
+    'pages/index/index',
+    'pages/page6/index',
+
+    'pages/page3/index',
+    'pages/page2/index',
+    'pages/page4/index',
+    'pages/page5/index',
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+}

src/app.css

@@ -0,0 +1,364 @@
+view {
+  box-sizing: border-box;
+}
+.tab {
+  display: flex;
+  flex: 1;
+  background-color: #FFFFFF;
+  position: relative;
+  transform: all 1.1s ease;
+}
+.tab .tablist {
+  width: 50%;
+  height: 84px;
+  font-size: 34px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 400;
+  color: #E03326;
+  line-height: 84px;
+  text-align: center;
+}
+.tab .tablistfan {
+  width: 50%;
+  height: 84px;
+  font-size: 34px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 84px;
+  text-align: center;
+}
+.tab .tabhua1 {
+  width: 136px;
+  height: 4px;
+  position: absolute;
+  top: 80px;
+  left: 118px;
+  background-color: #E03326;
+}
+.tab .tabhua2 {
+  width: 136px;
+  height: 4px;
+  position: absolute;
+  top: 80px;
+  left: 500px;
+  background-color: #E03326;
+}
+.recall {
+  background-color: #FFF4EF;
+  height: 72px;
+  padding-top: 20px;
+}
+.recall View {
+  height: 32px;
+  font-size: 28px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  display: flex;
+}
+.recall View::before {
+  content: '';
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+  margin-left: 24px;
+  margin-right: 32px;
+  background: url(assets/img/recall.png) no-repeat;
+  background-size: 100% auto;
+}
+.promessage {
+  width: 100%;
+  border-radius: 16px;
+  margin-top: 24px;
+  background-color: #FFFFFF;
+}
+.promessage .messtitle {
+  margin-left: 24px;
+  display: inline-block;
+  width: 156px;
+  padding-top: 24px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #333333;
+}
+.promessage .small1 {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 26px;
+  font-weight: 400;
+  color: #999999;
+}
+.promessage .small2 {
+  display: inline-block;
+  font-size: 26px;
+  font-weight: 400;
+  color: #F24724;
+}
+.promessage .messdiv {
+  height: 95px;
+  border-bottom: solid 1px #ececec;
+  padding-left: 0;
+  position: relative;
+}
+.promessage .messdiv .mess1 {
+  padding-left: 24px;
+  padding-top: 28px;
+  font-size: 30px;
+  font-weight: 400;
+  color: #333333;
+}
+.promessage .messdiv .mess2 {
+  font-size: 30px;
+  font-weight: 400;
+  color: #999999;
+  position: absolute;
+  top: 28px;
+  right: 22px;
+}
+.promessage .messdiv .iconpic {
+  width: 112px;
+  height: 96px;
+  position: absolute;
+  top: 0px;
+  right: 22px;
+  background: url(assets/img/iconlogo.png) no-repeat;
+  background-size: 100% auto;
+}
+.promessage .messdiv .icon2 {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: url(assets/img/right.png) no-repeat;
+  background-size: 100% auto;
+}
+.videodiv {
+  border-radius: 16px;
+  background-color: #FFFFFF;
+  margin-top: 28px;
+  padding: 28px 24px 32px 24px;
+}
+.videodiv .title {
+  font-size: 36px;
+  font-weight: 600;
+  color: #333333;
+}
+.videodiv .video {
+  height: 368px;
+  background-color: #333333;
+  margin-top: 24px;
+}
+.but {
+  height: 98px;
+  width: 702px;
+  text-align: center;
+  line-height: 98px;
+  background: #E03326;
+  border-radius: 12px;
+  margin: 40px 24px 432px 24px;
+  font-size: 36px;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+.advicetitle {
+  font-size: 36px;
+  font-weight: 500;
+  color: #333333;
+  padding: 24px 0 32px 20px;
+}
+.thingdiv {
+  width: 343px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  display: inline-block;
+  margin-bottom: 24px;
+}
+.thingdiv .pic {
+  height: 240px;
+  background-color: #ececec;
+  border-radius: 16px 16px 0 0;
+}
+.thingdiv .title {
+  margin: 16px 24px 14px 24px;
+  width: 295px;
+  height: 84px;
+  font-size: 30px;
+  font-weight: 500;
+  color: #333333;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.thingdiv .has {
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+  display: inline-block;
+}
+.thingdiv .has::before {
+  content: '';
+  display: inline-block;
+  width: 22.32px;
+  height: 23.26px;
+  background: url(assets/img/renzheng.png) no-repeat;
+  background-size: 100% auto;
+  margin-left: 24px;
+  margin-right: 10px;
+}
+.thingdiv .has::after {
+  content: '';
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E5E5E5;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+.thingdiv .address {
+  display: inline-block;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+}
+.thingdiv .price {
+  font-size: 30px;
+  font-weight: 600;
+  color: #F65200;
+  margin: 28px 0 22px 24px;
+}
+.weather {
+  margin-top: 24px;
+  padding: 24px 0 32px 0;
+  background-color: #FFF;
+  border-radius: 16px;
+}
+.weather .dev {
+  display: flex;
+}
+.weather .dev .title {
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  color: #0B0D0E;
+  margin: 0 400px 28px 22px;
+}
+.weather .dev .address {
+  display: flex;
+  font-size: 24px;
+  font-weight: 500;
+  color: #999999;
+}
+.weather .dev .address::before {
+  content: '';
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  background: url(assets/img/address.png) no-repeat;
+  background-size: 100% auto;
+}
+.weather .today {
+  padding: 40px 0 38px 40px;
+  border-top: 1px solid #EEEEEE;
+  border-bottom: 1px solid #EEEEEE;
+  display: flex;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+.weather .today .temp_curr {
+  display: inline-block;
+  font-size: 120px;
+  font-family: AvenirNext-DemiBold, AvenirNext;
+  font-weight: 600;
+  color: #333333;
+}
+.weather .today .todaydate {
+  display: flex;
+  flex-wrap: wrap;
+}
+.weather .today .todaydate .du {
+  width: 100%;
+  margin-left: 20px;
+  margin-top: 20px;
+  font-size: 48px;
+  font-family: AvenirNext-Medium, AvenirNext;
+  font-weight: 500;
+  color: #333333;
+}
+.weather .today .todaydate .sun {
+  margin-left: 35px;
+  font-size: 36px;
+  font-weight: 500;
+  color: #333333;
+}
+.weather .today .todaydate .date {
+  margin-top: 8px;
+  margin-left: 22px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #333333;
+}
+.weather .today .todaydate .temparea {
+  margin-top: 8px;
+  margin-left: 12px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 40px;
+}
+.weather .futuretitle {
+  width: 526px;
+  height: 60px;
+  background: #F0F1F2;
+  border-radius: 30px;
+  margin: 30px 0 16px 88px;
+  text-align: center;
+  font-size: 26px;
+  font-weight: 600;
+  color: #6C6D71;
+  line-height: 60px;
+}
+.weather .futurediv {
+  padding: 40px 54px 0 40px;
+  display: flex;
+  position: relative;
+}
+.weather .futurediv .data {
+  font-size: 26px;
+  font-weight: 500;
+  color: #333333;
+  margin-right: 136px;
+}
+.weather .futurediv .wea {
+  font-size: 26px;
+  font-weight: 500;
+  color: #333333;
+  position: absolute;
+  top: 40px;
+  left: 276px;
+  display: flex;
+}
+.weather .futurediv .wea::before {
+  content: '';
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  background: url(http://api.k780.com/upload/weather/d/1.gif) no-repeat;
+  background-size: 100% auto;
+  margin-right: 20px;
+}
+.weather .futurediv .temp {
+  font-size: 26px;
+  font-weight: 500;
+  color: #333333;
+  position: absolute;
+  top: 40px;
+  right: 54px;
+}
+.weather_qing::before {
+  background: url(assets/img/qing.png) no-repaet;
+  background-size: 100% auto;
+}

src/app.js

@@ -0,0 +1,20 @@
+import { Component } from 'react'
+import './app.less'
+import 'taro-ui/dist/style/index.scss'
+class App extends Component {
+
+  componentDidMount() { }
+
+  componentDidShow() { }
+
+  componentDidHide() { }
+
+  componentDidCatchError() { }
+
+  // this.props.children 是将要会渲染的页面
+  render() {
+    return this.props.children
+  }
+}
+
+export default App

src/app.less

@@ -0,0 +1,425 @@
+// @import '~taro-ui/dist/style/index.less';
+
+view {
+  box-sizing: border-box;
+}
+
+.tab {
+  display: flex;
+  flex: 1;
+  background-color: #FFFFFF;
+  position: relative;
+  transform: all 1.1s ease;
+
+  .tablist {
+    width: 50%;
+    height: 84px;
+    font-size: 34px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 400;
+    color: #E03326;
+    line-height: 84px;
+    text-align: center;
+  }
+
+  .tablistfan {
+    width: 50%;
+    height: 84px;
+    font-size: 34px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 84px;
+    text-align: center;
+  }
+
+  .tabhua1 {
+    width: 136px;
+    height: 4px;
+    position: absolute;
+    top: 80px;
+    left: 118px;
+    background-color: #E03326;
+  }
+
+  .tabhua2 {
+    width: 136px;
+    height: 4px;
+    position: absolute;
+    top: 80px;
+    left: 500px;
+    background-color: #E03326;
+  }
+}
+
+.recall {
+  background-color: #FFF4EF;
+  height: 72px;
+  padding-top: 20px;
+
+  View {
+    height: 32px;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #111111;
+    display: flex;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      height: 32px;
+      width: 32px;
+      margin-left: 24px;
+      margin-right: 32px;
+      background: url(assets/img/recall.png) no-repeat;
+      background-size: 100% auto;
+    }
+  }
+}
+
+.promessage {
+  width: 100%;
+  border-radius: 16px;
+  margin-top: 24px;
+  background-color: #FFFFFF;
+
+
+  .messtitle {
+    margin-left: 24px;
+    display: inline-block;
+    width: 156px;
+    padding-top: 24px;
+    font-size: 36px;
+    font-weight: 600;
+    color: #333333;
+  }
+
+  .small1 {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 26px;
+    font-weight: 400;
+    color: #999999;
+  }
+
+  .small2 {
+    display: inline-block;
+    font-size: 26px;
+    font-weight: 400;
+    color: #F24724;
+  }
+
+  .messdiv {
+    height: 95px;
+    border-bottom: solid 1px #ececec;
+    padding-left: 0;
+    position: relative;
+
+    .mess1 {
+      padding-left: 24px;
+      padding-top: 28px;
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .mess2 {
+
+      font-size: 30px;
+      font-weight: 400;
+      color: #999999;
+      position: absolute;
+      top: 28px;
+      right: 22px;
+    }
+
+    .iconpic {
+      width: 112px;
+      height: 96px;
+      position: absolute;
+      top: 0px;
+      right: 22px;
+      background: url(./assets/img/iconlogo.png) no-repeat;
+      background-size: 100% auto;
+    }
+
+    .icon2 {
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: url(assets/img/right.png) no-repeat;
+      background-size: 100% auto;
+    }
+  }
+}
+
+.videodiv {
+  border-radius: 16px;
+  background-color: #FFFFFF;
+  margin-top: 28px;
+  padding: 28px 24px 32px 24px;
+
+  .title {
+    font-size: 36px;
+    font-weight: 600;
+    color: #333333;
+  }
+
+  .video {
+    height: 368px;
+    background-color: #333333;
+    margin-top: 24px;
+  }
+}
+
+.but {
+  height: 98px;
+  width: 702px;
+  text-align: center;
+  line-height: 98px;
+  background: #E03326;
+  border-radius: 12px;
+  margin: 40px 24px 432px 24px;
+  font-size: 36px;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.advicetitle {
+  font-size: 36px;
+  font-weight: 500;
+  color: #333333;
+  padding: 24px 0 32px 20px;
+}
+
+.thingdiv {
+  width: 343px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  display: inline-block;
+  margin-bottom: 24px;
+
+  .pic {
+    height: 240px;
+    background-color: #ececec;
+    border-radius: 16px 16px 0 0;
+  }
+
+  .title {
+    margin: 16px 24px 14px 24px;
+    width: 295px;
+    height: 84px;
+    font-size: 30px;
+    font-weight: 500;
+    color: #333333;
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .has {
+    font-size: 24px;
+    font-weight: 400;
+    color: #999999;
+    display: inline-block;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 22.32px;
+      height: 23.26px;
+      background: url(./assets/img/renzheng.png) no-repeat;
+      background-size: 100% auto;
+      margin-left: 24px;
+      margin-right: 10px;
+    }
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 1px;
+      height: 24px;
+      background: #E5E5E5;
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+  }
+
+  .address {
+    display: inline-block;
+    font-size: 24px;
+    font-weight: 400;
+    color: #999999;
+  }
+
+  .price {
+    font-size: 30px;
+    font-weight: 600;
+    color: #F65200;
+    margin: 28px 0 22px 24px;
+  }
+}
+
+.weather {
+  margin-top: 24px;
+  padding: 24px 0 32px 0;
+  background-color: #FFF;
+  border-radius: 16px;
+
+  .dev {
+    display: flex;
+
+    .title {
+      display: inline-block;
+      font-size: 36px;
+      font-weight: 600;
+      color: #0B0D0E;
+      margin: 0 400px 28px 22px;
+    }
+
+    .address {
+      display: flex;
+      font-size: 24px;
+      font-weight: 500;
+      color: #999999;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        background: url(./assets/img/address.png) no-repeat;
+        background-size: 100% auto;
+      }
+    }
+  }
+
+  .today {
+    padding: 40px 0 38px 40px;
+    border-top: 1px solid #EEEEEE;
+    border-bottom: 1px solid #EEEEEE;
+    display: flex;
+    font-family: PingFangSC-Medium, PingFang SC;
+
+    .temp_curr {
+      display: inline-block;
+      font-size: 120px;
+      font-family: AvenirNext-DemiBold, AvenirNext;
+      font-weight: 600;
+      color: #333333;
+    }
+
+    .todaydate {
+      display: flex;
+      flex-wrap: wrap;
+
+      .du {
+        width: 100%;
+        margin-left: 20px;
+        margin-top: 20px;
+        font-size: 48px;
+        font-family: AvenirNext-Medium, AvenirNext;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .sun {
+        margin-left: 35px;
+        font-size: 36px;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .date {
+        margin-top: 8px;
+        margin-left: 22px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .temparea {
+        margin-top: 8px;
+        margin-left: 12px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 40px;
+      }
+    }
+  }
+
+  .futuretitle {
+    width: 526px;
+    height: 60px;
+    background: #F0F1F2;
+    border-radius: 30px;
+    margin: 30px 0 16px 88px;
+    text-align: center;
+    font-size: 26px;
+    font-weight: 600;
+    color: #6C6D71;
+    line-height: 60px;
+  }
+
+  .futurediv {
+    padding: 40px 54px 0 40px;
+    display: flex;
+    position: relative;
+
+    .data {
+      font-size: 26px;
+      font-weight: 500;
+      color: #333333;
+      margin-right: 136px;
+    }
+
+    .wea {
+      font-size: 26px;
+      font-weight: 500;
+      color: #333333;
+      position: absolute;
+      top: 40px;
+      left: 276px;
+      display: flex;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: url(http://api.k780.com/upload/weather/d/1.gif) no-repeat;
+        background-size: 100% auto;
+        margin-right: 20px;
+      }
+    }
+
+    .temp {
+      font-size: 26px;
+      font-weight: 500;
+      color: #333333;
+      position: absolute;
+      top: 40px;
+      right: 54px;
+    }
+  }
+}
+
+// .zhui {
+//   &::before {
+//     background-color: #d81b1b;
+//   }
+// }
+
+.weather_qing {
+  &::before {
+    background: url(./assets/img/qing.png) no-repaet;
+    background-size: 100% auto;
+  }
+}

src/assets/js/code.js

@@ -0,0 +1,49 @@
+export const HTTP_STATUS = {
+  SUCCESS: 200,
+  CLIENT_ERROR: 400,
+  AUTHENTICATE: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  SERVER_ERROR: 500,
+  BAD_GATEWAY: 502,
+  SERVICE_UNAVAILABLE: 503,
+  GATEWAY_TIMEOUT: 504
+}
+
+// promise status
+export const SUCCESS = { success: 'success' }
+export const FAIL = { fail: 'fail' }
+export const COMPLETE = { complete: 'complete' }
+
+export const PROMISE_STATUS = {
+  success: 'success',
+  fail: 'fail',
+  complete: 'complete'
+}
+
+export const RESULT_STATUS = {
+  SUCCESS: 0,
+  SIGNATURE_FAILED: 1000  // 签名失败
+}
+
+
+export const logError = (name, action, info) => {
+  if (!info) {
+    info = 'empty'
+  }
+  try {
+    let deviceInfo = wx.getSystemInfoSync()
+    var device = JSON.stringify(deviceInfo)
+  } catch (e) {
+    console.error('not support getSystemInfoSync api', err.message)
+  }
+  let time = new Date()
+  console.error(time, name, action, info, device)
+  // if (typeof action !== 'object') {
+  // fundebug.notify(name, action, info)
+  // }
+  // fundebug.notifyError(info, { name, action, device, time })
+  if (typeof info === 'object') {
+    info = JSON.stringify(info)
+  }
+}

src/assets/js/filter.js

@@ -0,0 +1,15 @@
+export function formatRichText(html) {
+  let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
+    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+    return match;
+  });
+  newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
+    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
+    return match;
+  });
+  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+  newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
+  return newContent;
+}

src/assets/js/index.js

@@ -0,0 +1,5 @@
+export const config = {
+  HOST: process.env.NODE_ENV === 'development' ? "http://139.155.240.30:5709/" : "http://139.155.240.30:5709/"  //test
+  // HOST: process.env.NODE_ENV === 'development' ? "http://101.37.76.132:8012/" : "http://101.37.76.132:8012/"
+  //http://101.37.76.132:8012/
+}

src/assets/js/server.js

@@ -0,0 +1,82 @@
+import Taro from '@tarojs/taro'
+import { HTTP_STATUS } from './code'
+import { logError } from './code'
+import store from "./../../store"
+import { config } from "./index"
+export default {
+  baseOptions(params, method = 'GET') {
+    let { url, data } = params
+    let token = store.data.token || ""
+    console.log(token)
+    let contentType = 'application/x-www-form-urlencoded'
+    contentType = params.contentType || contentType
+    const option = {
+      timeout: 10000,
+      isShowLoading: false,
+      loadingText: '正在加载',
+      url: url,      //config.HOST + url,
+      data: data,
+      method: method,
+      dataType: 'json',
+      header: { 'content-type': contentType, Authorization: token && `Bearer ${token}`, platform: 1 },
+      success(res) {
+        if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
+          return logError('api', '请求资源不存在')
+        } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
+          return logError('api', '服务端出现了问题')
+        } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
+          return logError('api', '没有权限访问')
+        } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
+          return res.data
+        }
+      },
+      fail(e) {
+
+      },
+
+      error(e) {
+        Taro.showToast({
+          title: "请求接口出现问题",
+          icon: "none",
+          duration: 3000
+        })
+        logError('api', '请求接口出现问题', e)
+      }
+    }
+    return new Promise(function (resolve, reject) {
+      Taro.request(option).then(e => {
+        console.log(url,e, e.data.data)
+        if (e.data.code == 200) {
+          resolve(e.data.data)
+        }
+        else if (e.data.code == 401) {
+          Taro.showToast({
+            title: "登陆超时",
+            icon: "none",
+            duration: 1000
+          })
+          Taro.removeStorage({ key: "t" })
+        }
+        else {
+          Taro.showToast({
+            title: e.data.msg,
+            icon: 'none',
+            duration: 1000
+          })
+          setTimeout(function () {
+            Taro.hideLoading()
+          }, 2000)
+          reject()
+        }
+      })
+    })
+  },
+  get(url, data = '') {
+    let option = { url, data }
+    return this.baseOptions(option)
+  },
+  post: function (url, data, contentType = 'application/json') {
+    let params = { url, data, contentType }
+    return this.baseOptions(params, 'POST')
+  }
+}

src/components/findcircle/index.jsx

@@ -0,0 +1,16 @@
+import { View} from '@tarojs/components'
+import Taro from "@tarojs/taro"
+const Findcircle = () =>{
+  const went=(url)=>{
+    Taro.navigateTo({
+      url:url
+    })
+  }
+  return (
+    <View className='findcircle' onTap={went.bind(this,`/pages/page3/index`)}>
+      <View className='findpic'></View>
+      <View className='findtext'>扫码查询</View>
+    </View>
+  )
+}
+export default Findcircle

src/components/recall/index.jsx

@@ -0,0 +1,12 @@
+import { View, Input } from '@tarojs/components'
+import Taro from "@tarojs/taro"
+import React,{useState} from 'react'
+const Recall =()=> {
+
+  return (
+    <View className='recall'>
+      <View>该商品已召回，请及时联系供应商</View>
+    </View>
+  )
+}
+export default Recall

src/components/search/index.jsx

@@ -0,0 +1,22 @@
+import { View, Input } from '@tarojs/components'
+import Taro from "@tarojs/taro"
+import React,{useState} from 'react'
+const Search =()=> {
+  const [num,setNum] =useState(null);
+  const shujuduqu=(e)=>{
+    setNum(e.detail.value)
+  }
+  const went=(url)=>{
+    Taro.navigateTo({
+      url:url
+    })
+  }
+  return (
+    <View className='search'>
+      <View className='text'>查看溯源码</View>
+        <Input placeholder='输入溯源码查询' placeholder-class='inplaceholder' onBlur={(e)=>shujuduqu(e)}></Input>
+      <View className='inputicon' onClick={went.bind(this,`/pages/page2/index`)}></View>
+    </View>
+  )
+}
+export default Search

src/components/weather/index.jsx

@@ -0,0 +1,93 @@
+import { View, Input } from '@tarojs/components'
+import Taro,{useReady} from "@tarojs/taro"
+import React,{useState,useEffect} from 'react'
+const Weather =(date)=> {
+  const [futureli,setFutureli]=useState([])
+  const [today,setToday]=useState([])
+  const [success,setSuccess]=useState(false)
+  const [time,setTime]=useState('')
+  const weather=(a)=> {
+    Taro.request({
+      url: a.url, //仅为示例，并非真实的接口地址
+      data: {
+        app: 'weather.'+a.type,
+        //cityId:"101210101",
+        //citynm:'北京',
+        weaId: a.weaId,
+        appkey: '10003',
+        sign: 'b59bc3ef6191eb9f747dd4e83c99f2a4',
+        format: 'json'
+      },
+      header: {
+        'content-type': 'application/json' // 默认值
+      },
+      success: function (res) {
+        //console.log(res.data.result)
+        if(a.type==='future')
+        {
+          setFutureli(res.data.result);
+
+        }
+          else if(a.type==='today')
+          {
+            //console.log(res.data.result);
+            setToday(res.data.result);
+          }
+      }
+    })
+  }
+  const getTime=()=>{
+    var time = new Date();
+    var h =time.getHours(); //h用来放时
+    h = h < 10? '0' + h:h;
+    var m = time.getMinutes();//m用来放分
+    m= m<10?'0'+m:m;
+    //console.log(time.getMonth()+1+'月'+time.getDate()+'日'+' '+h + ':' + m);
+    setTime(time.getMonth()+1+'月'+time.getDate()+'日'+' '+h + ':' + m)
+}
+const intoarea=(a)=>{
+  if(typeof(a)==='string')
+  return a.split('℃')[1].replace('/','')+'~'+ a.split('℃')[0]+'℃'
+
+}
+  useReady(() => {
+    weather({url:'https://sapi.k780.com',weaId:date.props.weaId,type:'future'});
+    weather({url:'https://sapi.k780.com',weaId:date.props.weaId,type:'today'});
+    setSuccess(true)
+    setInterval(getTime,1000);
+   })
+  //  useEffect(()=>{
+  //   setInterval(getTime,1000);
+  //  },[])
+  return (
+    <View className='weather'>
+      <View className="dev">
+        <View className="title">气象数据</View>
+        <View className="address">{today.citynm}市</View>
+      </View>
+      <View className="today">
+        <View className="temp_curr">{today.temp_curr}</View>
+        <View className="todaydate">
+         <View className="du">℃</View>
+         <View className="sun">{today.weather}</View>
+         <View className="date">{time}</View>
+         <View className="temparea">{intoarea(today.temperature)}</View>
+        </View>
+
+      </View>
+      <View className="futuretitle">未来7天天气预报</View>
+      {
+        futureli.map((item)=>{
+          return (
+            <View className="futurediv">
+              <View className='data'>{item.days.split('-')[1]}月{item.days.split('-')[2]}日</View>
+              <View className="wea zhui">{item.weather}</View>
+              <View className="temp">{intoarea(item.temperature)}</View>
+            </View>
+          )
+        })
+      }
+    </View>
+  )
+}
+export default Weather

src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title></title>
+  <script>
+    !function(n){function e(){var e=n.document.documentElement,t=e.getBoundingClientRect().width;e.style.fontSize=t>=640?"40px":t<=320?"20px":t/320*20+"px"}n.addEventListener("resize",(function(){e()})),e()}(window);
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/index/index.config.js

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '首页',
+  navigationBarBackgroundColor: '#E03326',
+  navigationBarTextStyle: 'white'
+}

src/pages/index/index.css

@@ -0,0 +1,77 @@
+.index {
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+.index .search {
+  background: linear-gradient(178deg, #E03326 0%, #E33A25 100%);
+  padding: 0 24px 42px 24px;
+  position: relative;
+}
+.index .search .text {
+  font-size: 32px;
+  font-weight: 500;
+  color: #FFFFFF;
+  padding-top: 38px;
+}
+.index .search Input {
+  margin-top: 22px;
+  width: 676px;
+  height: 96px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  padding-left: 26px;
+}
+.index .search Input .inplaceholder {
+  width: 542px;
+  height: 42px;
+  font-size: 30px;
+  font-weight: 400;
+  color: #CCCCCC;
+  line-height: 42px;
+}
+.index .search .inputicon {
+  position: absolute;
+  top: 132px;
+  right: 56px;
+  width: 40px;
+  height: 40px;
+  background: url(../../assets/img/search.png) no-repeat;
+  background-size: 100% auto;
+  z-index: 999;
+}
+.index .findcircle {
+  width: 313px;
+  height: 313px;
+  background: linear-gradient(178deg, #FF6054 0%, #E33A25 100%);
+  margin: 270px 214px 74px 220px;
+  border-radius: 50%;
+  padding-top: 82px;
+  box-shadow: 0px 0px 5px 15px #f5e2df;
+}
+.index .findcircle .findpic {
+  width: 84px;
+  height: 84px;
+  margin-left: 114px;
+  margin-bottom: 16px;
+  background: url(../../assets/img/findpic.png) no-repeat;
+  background-size: 100% auto;
+}
+.index .findcircle .findtext {
+  font-size: 36px;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin-left: 86px;
+}
+.index .babletext {
+  margin-left: 198px;
+  font-size: 32px;
+  font-weight: 400;
+  color: #999999;
+  margin-bottom: 282px;
+}
+.index .bottompic {
+  margin-left: 56px;
+  height: 198px;
+  width: 692px;
+  background: url(../../assets/img/bottompic.png) no-repeat;
+  background-size: 100% auto;
+}

src/pages/index/index.jsx

@@ -0,0 +1,18 @@
+import { Component } from 'react'
+import { View, Text,Input } from '@tarojs/components'
+import Search from "../../components/search/index"
+import Findcircle from "../../components/findcircle/index"
+import './index.less'
+import Taro from "@tarojs/taro"
+const Index= ()=> {
+
+return (
+      <View className='index'>
+        <Search></Search>
+        <Findcircle></Findcircle>
+        <View className='babletext'>点击按钮查询对应溯源码</View>
+        <View className="bottompic"></View>
+      </View>
+    )
+}
+export default Index

src/pages/index/index.less

@@ -0,0 +1,87 @@
+.index {
+  font-family: PingFangSC-Medium, PingFang SC;
+
+  .search {
+    background: linear-gradient(178deg, #E03326 0%, #E33A25 100%);
+    padding: 0 24px 42px 24px;
+    position: relative;
+
+    .text {
+      font-size: 32px;
+      font-weight: 500;
+      color: #FFFFFF;
+      padding-top: 38px;
+    }
+
+    Input {
+      margin-top: 22px;
+      width: 676px;
+      height: 96px;
+      background: #FFFFFF;
+      border-radius: 16px;
+      padding-left: 26px;
+
+      .inplaceholder {
+        width: 542px;
+        height: 42px;
+        font-size: 30px;
+        font-weight: 400;
+        color: #CCCCCC;
+        line-height: 42px;
+      }
+    }
+
+    .inputicon {
+      position: absolute;
+      top: 132px;
+      right: 56px;
+      width: 40px;
+      height: 40px;
+      background: url(../../assets/img/search.png) no-repeat;
+      background-size: 100% auto;
+      z-index: 999;
+    }
+  }
+
+  .findcircle {
+    width: 313px;
+    height: 313px;
+    background: linear-gradient(178deg, #FF6054 0%, #E33A25 100%);
+    margin: 270px 214px 74px 220px;
+    border-radius: 50%;
+    padding-top: 82px;
+    box-shadow: 0px 0px 5px 15px #f5e2df;
+
+    .findpic {
+      width: 84px;
+      height: 84px;
+      margin-left: 114px;
+      margin-bottom: 16px;
+      background: url(../../assets/img/findpic.png) no-repeat;
+      background-size: 100% auto;
+    }
+
+    .findtext {
+      font-size: 36px;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-left: 86px;
+    }
+  }
+
+  .babletext {
+    margin-left: 198px;
+    font-size: 32px;
+    font-weight: 400;
+    color: #999999;
+    margin-bottom: 282px;
+  }
+
+  .bottompic {
+    margin-left: 56px;
+    height: 198px;
+    width: 692px;
+    background: url(../../assets/img/bottompic.png) no-repeat;
+    background-size: 100% auto;
+  }
+}

src/pages/page2/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '溯源查询'
+}

src/pages/page2/index.css

@@ -0,0 +1,17 @@
+page {
+  background: #F5F5F5;
+}
+.cantfind .cantfindicon {
+  width: 68px;
+  height: 58px;
+  margin: 342px 340px 40px 342px;
+  background: url(../../assets/img/cantfindicon.png) no-repeat;
+  background-size: 100% auto;
+}
+.cantfind Text {
+  margin-left: 280px;
+  font-size: 32px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+}

src/pages/page2/index.jsx

@@ -0,0 +1,16 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import Search from "../../components/search/index"
+import Findcircle from "../../components/findcircle/index"
+import './index.less'
+
+const Index= ()=> {
+  
+return (
+      <View className='cantfind'>
+        <View className="cantfindicon"></View>
+        <Text>暂无此溯源码</Text>
+      </View>
+    )
+}
+export default Index

src/pages/page2/index.less

@@ -0,0 +1,21 @@
+page {
+  background: #F5F5F5;
+}
+
+.cantfind {
+  .cantfindicon {
+    width: 68px;
+    height: 58px;
+    margin: 342px 340px 40px 342px;
+    background: url(../../assets/img/cantfindicon.png) no-repeat;
+    background-size: 100% auto;
+  }
+
+  Text {
+    margin-left: 280px;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+  }
+}

src/pages/page3/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '溯源查询'
+}

src/pages/page3/index.css

@@ -0,0 +1,178 @@
+page {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+  padding-bottom: 108px;
+}
+.message .chanpin .mes {
+  padding: 24px 24px 24px 24px;
+  background: #F5F5F5;
+}
+.message .chanpin .mes .productfrom {
+  background: #FFFFFF;
+  border-radius: 16px;
+}
+.message .chanpin .mes .productfrom .bigtitle {
+  font-size: 36px;
+  font-weight: 600;
+  color: #333333;
+  padding-top: 24px;
+  padding-left: 24px;
+  margin-bottom: 40px;
+}
+.message .chanpin .mes .productfrom .allmessage {
+  display: flex;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten {
+  width: 550px;
+  height: 416px;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .title {
+  font-size: 30px;
+  font-weight: 500;
+  color: #0B0D0E;
+  line-height: 42px;
+  position: relative;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .title::before {
+  content: '';
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 12px;
+  left: -68px;
+  background: url(../../assets/img/point.png) no-repeat;
+  background-size: 100% auto;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .time {
+  display: inline-block;
+  width: 156px;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 34px;
+  padding-top: 10px;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .time::after {
+  content: '';
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E5E5E5;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .name {
+  display: inline-block;
+  width: 72px;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .text {
+  padding-top: 10px;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+}
+.message .chanpin .mes .productfrom .allmessage .contens .conten .inner .pic {
+  width: 90%;
+  height: 180px;
+  background-color: #02B178;
+  margin-top: 24px;
+  border-radius: 16px;
+}
+.message .chanpin .mes .productfrom .allmessage::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 820px;
+  background-color: #E5E5E5;
+  margin-left: 56px;
+  margin-right: 56px;
+  margin-top: 32px;
+}
+.message .chanpin .mes .productfrom .more {
+  padding-bottom: 32px;
+  font-size: 24px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #838485;
+  text-align: center;
+}
+.message .chanpin .mes .productfrom .more::after {
+  content: '';
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+  margin-left: 10px;
+  background: url(../../assets/img/up.png) no-repeat;
+  background-size: 100% auto;
+}
+.message .chanpin .mes .productfrom .less {
+  padding-bottom: 32px;
+  font-size: 24px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #838485;
+  text-align: center;
+}
+.message .chanpin .mes .productfrom .less::after {
+  content: '';
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+  margin-left: 10px;
+  background: url(../../assets/img/down.png) no-repeat;
+  background-size: 100% auto;
+}
+.message .chanpin .mes .showpic {
+  height: 320px;
+  width: 100%;
+  margin-top: 24px;
+  border-radius: 16px;
+  background-color: aqua;
+}
+.message .chanpin .mes .wuliumessage {
+  border-radius: 16px;
+  background-color: #FFFFFF;
+  padding: 24px 0 6px 24px;
+  margin-top: 24px;
+}
+.message .chanpin .mes .wuliumessage .title {
+  font-size: 36px;
+  font-weight: 600;
+  color: #333333;
+}
+.message .chanpin .mes .wuliumessage .wuliudiv {
+  padding: 24px 0 24px 120px;
+  border-bottom: 1px solid #EEEEEE;
+  position: relative;
+}
+.message .chanpin .mes .wuliumessage .wuliudiv .commess {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  font-size: 34px;
+  font-weight: 400;
+  color: #333333;
+}
+.message .chanpin .mes .wuliumessage .wuliudiv .tel {
+  font-size: 30px;
+  font-weight: 400;
+  color: #999999;
+}
+.message .chanpin .mes .wuliumessage .wuliudiv .icon {
+  width: 72px;
+  height: 72px;
+  position: absolute;
+  top: 32px;
+  left: 24px;
+  background-color: #F24724;
+}
+.message .chandi {
+  background: #F5F5F5;
+  padding: 24px 24px 0 24px;
+}
+.message .chandi .swiper-body {
+  height: 320px;
+}

src/pages/page3/index.jsx

@@ -0,0 +1,183 @@
+import { Component } from 'react'
+import { View, Text,Swiper,SwiperItem,Image } from '@tarojs/components'
+import './index.less'
+import Taro,{useDidHide,useReady} from "@tarojs/taro"
+import React,{useState,useEffect,onLoad,useLayoutEffect} from 'react'
+import Recall from '../../components/recall'
+import Weather from '../../components/weather'
+import { formatRichText } from "../../assets/js/filter"
+const Index= ()=> {
+  const [choice,setChoice]=useState(1)
+  //设置产地天气定位城市ID，94为杭州
+  const [cityID,setCityID]=useState(84)
+  //生产追溯是否展开，true为初始不展开，false展开
+  const [ifshow,setIfshow]=useState(true)
+  const [success,setSuccess]=useState(false)
+  const setChoice1=()=>{
+    setChoice(1)
+    console.log(cityID)
+    console.log(success)
+  }
+  const setChoice2=()=>{
+    setChoice(2)
+  }
+  const findmore = () =>{
+    ifshow===false?setIfshow(true):setIfshow(false);
+  }
+
+  const went=(url)=>{
+    Taro.navigateTo({
+      url:url
+    })
+  }
+  
+  useLayoutEffect(() => {
+      setCityID(94)
+
+    },[])
+
+  const froms = [{title:'产前阶段：种植',time:'2021-09-11',name:'张和农',text:'操作描述：自然气候条件独特，常年云雾缭绕，周  边环境污染，是生产优质自然生态蔬菜园。'},
+  {title:'产前阶段：除虫',time:'2021-09-12',name:'张和农',text:'操作描述：自然气候条件独特，常年云雾缭绕，周边环境污染，是生产优质自然生态蔬菜园。'},
+  {title:'产前阶段：仓储信息',time:'2021-09-12',name:'张和农',text:'操作描述：自然气候条件独特，常年云雾缭绕，周边环境污染，是生产优质自然生态蔬菜园。'}]
+
+  const promesslist = [{title:'产品名称',mess:'宫廷御用菜'},{title:'产品分类',mess:'蔬菜'},{title:'产品规格',mess:'2000g'},{title:'建议价',mess:'38元/斤'},{title:'溯源码',mess:'0253111625362354'}]
+  const wuliulist = [{com:'优鲜购有限公司（采购商）',tel:12034131310},{com:'果乐汇有限公司（供应商）',tel:12034131310}]
+  const thinglist = [{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'新疆维吾尔',price:430},{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'新疆维吾尔',price:430}
+  ,{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'杭州',price:430},{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'徐州',price:430}]
+  const addmesslist = [{title:'产地名称',text:'宫廷御用莲'},{title:'详细地址',text:'北京市东城区东区路112号'},{title:'负责人',text:'韩建'}]
+  return (
+      <View className='message'>
+        <View className='tab'>
+              <View className={choice === 1?'tablist':'tablistfan'} onClick={setChoice1}>产品介绍</View>
+              <View className={choice === 2?'tablist':'tablistfan'} onClick={setChoice2}>产地介绍</View>
+              <View className={choice === 1?'tabhua1':'tabhua2'}></View>
+        </View>
+        <View className="chanpin" style={choice==1?'display:block':'display:none'}>
+          <Recall></Recall>
+          <View className="mes">
+            <View className="productfrom">
+              <View className="bigtitle">生产追溯</View>
+              <View className="allmessage" style={ifshow==false?'':''}>
+                <View className="contens">
+                {
+                froms.map((item,index)=>{
+                  return (
+                    <View className='conten' key={index} style={index<1||ifshow==false?'display:inline-block':'display:inline-block'}>
+                      <View className="inner">
+                      <View className="title">{item.title}</View>
+                      <View className="time">{item.time}</View>
+                      <View className="name">{item.name}</View>
+                      <View className="text">{item.text}</View>
+                      <View className="pic"></View>
+                      </View>
+                    </View>  )
+                })
+              }
+                </View>
+              </View>
+              <View className={ifshow==false?'more':'less'} onClick={findmore}>{ifshow==false?'收起':'点击查看更多'}</View>
+            </View>
+            <View className="showpic"></View>
+            <View className="promessage">
+              <View className="messtitle">产品信息</View>
+              <View className="small1">该批次产品已追溯</View>
+              <View className="small2">190022次</View>
+              {
+                promesslist.map((item,index)=>{
+                  return (
+                    <View className="messdiv">
+                      <View className="mess1">{item.title}</View>
+                      <View className="mess2">{item.mess}</View>
+                    </View>
+                  )
+                })
+              }
+              <View className="messdiv">
+                <View className="mess1">认证标识</View>
+                <View className="iconpic"></View>
+              </View>
+              <View className="messdiv"  style='border:none' onClick={went.bind(this,`/pages/page4/index`)}>
+                <View className="mess1">投诉建议</View>
+                <View className="icon2"></View>
+              </View>
+            </View>
+            <View className="videodiv">
+              <View className="title">产品短片</View>
+              <View className="video"></View>
+            </View>
+            <View className="wuliumessage">
+              <View className="title">物流信息</View>
+              {
+                wuliulist.map((item,index)=>{
+                  return (
+                    <View className="wuliudiv" style={index===wuliulist.length-1?'border:none':''}>
+                      <View className="commess">{item.com}</View>
+                      {/* <View className="tel">联系电话：{item.tel}</View> */}
+                      <View className="icon"></View>
+                    </View>
+                  )
+                })
+              }
+            </View>
+            <View className="advicetitle">优品推荐</View>
+            {
+              thinglist.map((item,index)=>{
+                return(
+                  <View className="thingdiv" style={index%2==0?'margin-right:10px':''} onClick={went.bind(this,`/pages/page6/index`)}>
+                    <View className="pic"></View>
+                    <View className="title">大方土特产，独特配方专业人士手艺的测试测试测试</View>
+                    <View className="has">认证商品</View>
+                    <View className="address">新疆维吾尔</View>
+                    <View className="price">￥430</View>
+                </View>
+                )
+              })
+            }
+          </View>
+        </View>
+        <View className="chandi" style={choice==1?'display:none':'display:block'}>
+        <Swiper
+          className='swiper-body'
+          indicatorDots
+          indicatorColor='#999'
+          indicatorActiveColor='#333'
+          current
+          duration={500}
+          interval={5000}
+          circular
+          autoplay>
+        <SwiperItem>
+          <View className='demo-text-1'>1</View>
+        </SwiperItem>
+        <SwiperItem>
+          <View className='demo-text-2'>2</View>
+        </SwiperItem>
+        <SwiperItem>
+          <View className='demo-text-3'>3</View>
+        </SwiperItem>
+      </Swiper>
+            <View className="promessage">
+              <View className="messtitle">产地信息</View>
+              <View className="small1">该批次产品已追溯</View>
+              <View className="small2">190022次</View>
+              {
+                addmesslist.map((item,index)=>{
+                  return (
+                    <View className="messdiv" style={index==0?'margin-top:14px':''}>
+                      <View className="mess1">{item.title}</View>
+                      <View className="mess2">{item.text}</View>
+                    </View>
+                  )
+                })
+              }
+            </View>
+            <View className="videodiv">
+              <View className="title">生产基地短片</View>
+              <Image className="video" src='http://api.k780.com/upload/weather/d/1.gif'></Image>
+            </View>
+            <Weather props={{weaId:cityID}}></Weather>
+        </View>
+      </View>
+    )
+}
+export default Index

src/pages/page3/index.less

@@ -0,0 +1,225 @@
+page {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+  padding-bottom: 108px;
+}
+
+.message {
+  .chanpin {
+    .mes {
+      padding: 24px 24px 24px 24px;
+      background: #F5F5F5;
+
+      .productfrom {
+        background: #FFFFFF;
+        border-radius: 16px;
+        // display: flex;
+        // flex-wrap: wrap;
+
+        .bigtitle {
+          font-size: 36px;
+          font-weight: 600;
+          color: #333333;
+          padding-top: 24px;
+          padding-left: 24px;
+          margin-bottom: 40px;
+        }
+
+        .allmessage {
+
+          display: flex;
+          // flex-wrap: wrap;
+
+
+          .contens {
+            .conten {
+              width: 550px;
+              height: 416px;
+
+              .inner {
+                .title {
+                  font-size: 30px;
+                  font-weight: 500;
+                  color: #0B0D0E;
+                  line-height: 42px;
+                  position: relative;
+
+                  &::before {
+                    content: '';
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                    position: absolute;
+                    top: 12px;
+                    left: -68px;
+                    background: url(../../assets/img/point.png) no-repeat;
+                    background-size: 100% auto;
+                  }
+                }
+
+                .time {
+                  display: inline-block;
+                  width: 156px;
+                  font-size: 24px;
+                  font-weight: 400;
+                  color: #999999;
+                  line-height: 34px;
+                  padding-top: 10px;
+
+                  &::after {
+                    content: '';
+                    display: inline-block;
+                    width: 1px;
+                    height: 24px;
+                    background: #E5E5E5;
+                    margin-left: 12px;
+                    margin-right: 12px;
+                  }
+                }
+
+                .name {
+                  display: inline-block;
+                  width: 72px;
+                  font-size: 24px;
+                  font-weight: 400;
+                  color: #999999;
+                }
+
+                .text {
+                  padding-top: 10px;
+                  font-size: 24px;
+                  font-weight: 400;
+                  color: #999999;
+                }
+
+                .pic {
+                  width: 90%;
+                  height: 180px;
+                  background-color: #02B178;
+                  margin-top: 24px;
+                  border-radius: 16px;
+                }
+              }
+            }
+          }
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 4px;
+            height: 820px;
+            background-color: #E5E5E5;
+            margin-left: 56px;
+            margin-right: 56px;
+            margin-top: 32px;
+          }
+        }
+
+        .more {
+          //padding-top: 32px;
+          padding-bottom: 32px;
+          font-size: 24px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #838485;
+          text-align: center;
+
+          &::after {
+            content: '';
+            display: inline-block;
+            width: 19px;
+            height: 19px;
+            margin-left: 10px;
+            background: url(../../assets/img/up.png) no-repeat;
+            background-size: 100% auto;
+          }
+        }
+
+        .less {
+          //padding-top: 32px;
+          padding-bottom: 32px;
+          font-size: 24px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #838485;
+          text-align: center;
+
+          &::after {
+            content: '';
+            display: inline-block;
+            width: 19px;
+            height: 19px;
+            margin-left: 10px;
+            background: url(../../assets/img/down.png) no-repeat;
+            background-size: 100% auto;
+          }
+        }
+      }
+
+      .showpic {
+        height: 320px;
+        width: 100%;
+        margin-top: 24px;
+        border-radius: 16px;
+        background-color: aqua;
+      }
+
+
+
+
+
+      .wuliumessage {
+        border-radius: 16px;
+        background-color: #FFFFFF;
+        padding: 24px 0 6px 24px;
+        margin-top: 24px;
+
+        .title {
+          font-size: 36px;
+          font-weight: 600;
+          color: #333333;
+        }
+
+        .wuliudiv {
+          padding: 24px 0 24px 120px;
+          border-bottom: 1px solid #EEEEEE;
+          position: relative;
+
+          .commess {
+            padding-top: 20px;
+            padding-bottom: 10px;
+            font-size: 34px;
+            font-weight: 400;
+            color: #333333;
+          }
+
+          .tel {
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+          }
+
+          .icon {
+            width: 72px;
+            height: 72px;
+            position: absolute;
+            top: 32px;
+            left: 24px;
+            background-color: #F24724;
+          }
+        }
+      }
+
+
+    }
+  }
+
+  .chandi {
+    background: #F5F5F5;
+    padding: 24px 24px 0 24px;
+
+    .swiper-body {
+      height: 320px;
+    }
+  }
+}

src/pages/page4/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '投诉建议'
+}

src/pages/page4/index.css

@@ -0,0 +1,83 @@
+page {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+.complain .messdiv {
+  padding: 30px 0 28px 24px;
+  background-color: #FFFFFF;
+  border-bottom: 1px solid #EEEEEE;
+  display: flex;
+  position: relative;
+}
+.complain .messdiv .mess1 {
+  display: inline-block;
+  width: 198px;
+  font-size: 30px;
+  font-weight: 500;
+  color: #333333;
+}
+.complain .messdiv .mess2 {
+  display: inline-block;
+  width: 478px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #999999;
+  overflow: visible;
+  word-break: break-all;
+}
+.complain .messdiv .icon {
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  top: 34px;
+  left: 688px;
+  background: url(../../assets/img/right.png) no-repeat;
+  background-size: 100% auto;
+}
+.complain .lab {
+  margin: 16px 0 16px 0;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+  display: flex;
+}
+.complain .lab::before {
+  content: '';
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-color: #999999;
+  border-radius: 50%;
+  margin: 14px 8px 0 24px;
+}
+.complain .complainpic {
+  background-color: #FFFFFF;
+  padding: 30px 0 30px 24px;
+}
+.complain .complainpic .title {
+  font-size: 30px;
+  font-weight: 500;
+  color: #333333;
+}
+.complain .complainpic .picdiv {
+  width: 160px;
+  height: 160px;
+  margin-top: 36px;
+  background-color: #f4f5f6;
+  margin-bottom: 8px;
+  position: relative;
+}
+.complain .complainpic .picdiv .icon {
+  width: 38px;
+  height: 38px;
+  position: absolute;
+  top: 62px;
+  left: 62px;
+  background: url(../../assets/img/camera.png) no-repeat;
+  background-size: 100% auto;
+}
+.complain .complainpic .label {
+  font-size: 24px;
+  font-weight: 400;
+  color: #333333;
+}

src/pages/page4/index.jsx

@@ -0,0 +1,70 @@
+import { Component,useState} from 'react'
+import { View, Text,Textarea,Input } from '@tarojs/components'
+import './index.less'
+import Taro from "@tarojs/taro"
+import { AtImagePicker } from 'taro-ui'
+import "taro-ui/dist/style/components/image-picker.scss";
+import "taro-ui/dist/style/components/icon.scss";
+import { AtActionSheet, AtActionSheetItem } from "taro-ui"
+import "taro-ui/dist/style/components/action-sheet.scss";
+const went=(url)=>{
+  Taro.navigateTo({
+    url:url
+  })
+}
+const Index= ()=> {
+
+    const [files,setFiles]=useState([])
+    const onChange=(files)=>{
+      setFiles(files)
+
+    }
+    const onFail=(mes)=>{
+      console.log(mes)
+    }
+    const onImageClick=(index, file)=>{
+      console.log(index, file)
+    }
+return (
+      <View className='complain'>
+        <View className="messdiv">
+          <View className="mess1">姓名</View>
+          <Input className='mess2' placeholder="请输入姓名（选填）"></Input>
+        </View>
+        <View className="messdiv">
+          <View className="mess1">手机号</View>
+          <Input className='mess2' placeholder="请输入手机号（选填）"></Input>
+        </View>
+        <View className="messdiv">
+          <View className="mess1">投诉类型</View>
+          <AtActionSheet cancelText='取消' title='头部标题可以用通过转义字符换行'>
+  <AtActionSheetItem>
+    按钮一
+  </AtActionSheetItem>
+  <AtActionSheetItem>
+    按钮二
+  </AtActionSheetItem>
+</AtActionSheet>
+          <View className="icon"></View>
+        </View>
+        <View className="messdiv">
+          <View className="mess1">内容</View>
+          <Textarea className='mess2' placeholder="请描述投诉详情请描述投诉详情请描述投诉详情请描述投诉详情" style='height:88rpx'></Textarea>
+        </View>
+        <View className="lab">查证后将视情况给予一定奖励，建议留下联系方式，以便联系您
+        </View>
+        <View className="complainpic">
+          <View className="title">投诉图片</View>
+          {/* <View className="picdiv"><View className="icon"></View></View> */}
+          <AtImagePicker
+          //className="picdiv"
+        files={files}
+        onChange={onChange.bind(this)}
+      />
+          <View className="label">文件大小不超过5M</View>
+        </View>
+        <View className="but" onClick={went.bind(this,`/pages/page5/index`)}>提交</View>
+      </View>
+    )
+}
+export default Index

src/pages/page4/index.less

@@ -0,0 +1,98 @@
+page {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+
+.complain {
+  .messdiv {
+    padding: 30px 0 28px 24px;
+    background-color: #FFFFFF;
+    border-bottom: 1px solid #EEEEEE;
+    display: flex;
+    position: relative;
+
+    .mess1 {
+      display: inline-block;
+      width: 198px;
+      font-size: 30px;
+      font-weight: 500;
+      color: #333333;
+
+    }
+
+    .mess2 {
+      display: inline-block;
+      width: 478px;
+      font-size: 28px;
+      font-weight: 400;
+      color: #999999;
+      overflow: visible;
+      word-break: break-all
+    }
+
+    .icon {
+      width: 36px;
+      height: 36px;
+      position: absolute;
+      top: 34px;
+      left: 688px;
+      background: url(../../assets/img/right.png) no-repeat;
+      background-size: 100% auto;
+    }
+  }
+
+  .lab {
+    margin: 16px 0 16px 0;
+    font-size: 24px;
+    font-weight: 400;
+    color: #999999;
+    display: flex;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      height: 8px;
+      width: 8px;
+      background-color: #999999;
+      border-radius: 50%;
+      margin: 14px 8px 0 24px;
+    }
+  }
+
+  .complainpic {
+    background-color: #FFFFFF;
+    padding: 30px 0 30px 24px;
+
+    .title {
+      font-size: 30px;
+      font-weight: 500;
+      color: #333333;
+    }
+
+    .picdiv {
+      width: 160px;
+      height: 160px;
+      margin-top: 36px;
+      background-color: #f4f5f6;
+      margin-bottom: 8px;
+      position: relative;
+
+      .icon {
+        width: 38px;
+        height: 38px;
+        position: absolute;
+        top: 62px;
+        left: 62px;
+        background: url(../../assets/img/camera.png) no-repeat;
+        background-size: 100% auto;
+      }
+    }
+
+    .label {
+      font-size: 24px;
+      font-weight: 400;
+      color: #333333;
+    }
+  }
+
+}

src/pages/page5/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '投诉建议'
+}

src/pages/page5/index.css

@@ -0,0 +1,29 @@
+page {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+.success {
+  background-color: #FFFFFF;
+  padding: 78px 0 46px 0;
+}
+.success .icon {
+  width: 108px;
+  height: 108px;
+  margin-left: 322px;
+  background: url(../../assets/img/success.png) no-repeat;
+  background-size: 100% auto;
+}
+.success .text1 {
+  font-size: 36px;
+  font-weight: 400;
+  color: #333333;
+  margin-top: 46px;
+  text-align: center;
+}
+.success .text2 {
+  font-size: 26px;
+  font-weight: 400;
+  color: #999999;
+  margin-top: 16px;
+  text-align: center;
+}

src/pages/page5/index.jsx

@@ -0,0 +1,44 @@
+import { Component } from 'react'
+import { View, Text,Textarea } from '@tarojs/components'
+import './index.less'
+import Taro from "@tarojs/taro"
+import React,{useState} from 'react'
+const went=(url)=>{
+  // Taro.navigateTo({
+  //   url:url
+  // })
+
+  Taro.request({
+    url: 'https://sapi.k780.com', //仅为示例，并非真实的接口地址
+    data: {
+      app:'weather.today',
+      //cityId:"101210101",
+      //citynm:'北京',
+      weaId:'94',
+      appkey: '10003',
+      sign:'b59bc3ef6191eb9f747dd4e83c99f2a4',
+      format:'json'
+    },
+    header: {
+      'content-type': 'application/json' // 默认值
+    },
+    success: function (res) {
+      console.log(res.data)
+    }
+  })
+}
+const Index= ()=> {
+  
+return (
+        <View className="index">
+          <View className="success" onClick={went}>
+            <View className="icon"></View>
+            <View className="text1">提交成功</View>
+            <View className="text2">单号：DH012365345343425</View>
+            <View className="text2" style="margin-top:6px">建议保留工号</View>
+          </View>
+          
+        </View>
+    )
+}
+export default Index

src/pages/page5/index.less

@@ -0,0 +1,33 @@
+page {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+
+.success {
+  background-color: #FFFFFF;
+  padding: 78px 0 46px 0;
+
+  .icon {
+    width: 108px;
+    height: 108px;
+    margin-left: 322px;
+    background: url(../../assets/img/success.png) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .text1 {
+    font-size: 36px;
+    font-weight: 400;
+    color: #333333;
+    margin-top: 46px;
+    text-align: center;
+  }
+
+  .text2 {
+    font-size: 26px;
+    font-weight: 400;
+    color: #999999;
+    margin-top: 16px;
+    text-align: center;
+  }
+}

src/pages/page6/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '商品详情'
+}

src/pages/page6/index.css

@@ -0,0 +1,135 @@
+page {
+  background: #F5F5F5;
+  padding-bottom: 72px;
+}
+.index {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+  padding: 34px 24px 0 24px;
+}
+.index .banner {
+  height: 552px;
+  border-radius: 16px 16px 0 0;
+  position: relative;
+}
+.index .banner .swiper-body {
+  width: 100%;
+  height: 100%;
+}
+.index .banner .demo-text-1 {
+  width: 100%;
+  height: 100%;
+  background-color: #E03326;
+}
+.index .banner .change {
+  width: 80px;
+  height: 40px;
+  background: rgba(33, 33, 33, 0.27);
+  border-radius: 24px;
+  position: absolute;
+  top: 488px;
+  left: 598px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #FFFFFF;
+  letter-spacing: 1px;
+  text-align: center;
+}
+.index .bannermess {
+  padding: 40px 0 40px 26px;
+  display: flex;
+  flex-wrap: wrap;
+  background: #FFFFFF;
+  border-radius: 0 0 16px 16px;
+}
+.index .bannermess .text1 {
+  width: 518px;
+  font-size: 32px;
+  font-weight: 500;
+  color: #333333;
+}
+.index .bannermess .text2 {
+  font-size: 24px;
+  font-weight: 400;
+  color: #E03326;
+}
+.index .bannermess .text2::before {
+  content: '';
+  display: inline-block;
+  width: 22.32px;
+  height: 23.26px;
+  background: url(../../assets/img/renzheng.png) no-repeat;
+  background-size: 100% auto;
+  margin-right: 10px;
+}
+.index .bannermess .text3 {
+  font-size: 28px;
+  font-weight: 400;
+  color: #999999;
+  margin: 20px 0 20px 0;
+}
+.index .bannermess .text4 {
+  font-size: 28px;
+  font-weight: 400;
+  color: #999999;
+}
+.index .porintro {
+  background: #FFFFFF;
+  border-radius: 16px;
+  padding: 24px 0 32px 0;
+  margin-top: 24px;
+}
+.index .porintro .title {
+  margin: 0 0 54px 24px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #0B0D0E;
+}
+.index .porintro .pic {
+  width: 90%;
+  height: 470px;
+  margin-left: 5%;
+  background-color: #999999;
+  margin-bottom: 40px;
+}
+.index .chandiintro {
+  background: #FFFFFF;
+  border-radius: 16px;
+  padding: 24px 0 26px 0;
+  margin-top: 24px;
+}
+.index .chandiintro .introtitle {
+  font-size: 36px;
+  font-weight: 600;
+  color: #0B0D0E;
+  margin-left: 24px;
+  margin-bottom: 20px;
+}
+.index .chandiintro .chandidiv {
+  padding: 28px 0 36px 20px;
+  border-bottom: solid 1px #EEEEEE;
+  display: flex;
+}
+.index .chandiintro .chandidiv .pic {
+  width: 148px;
+  height: 146px;
+  background-color: #E03326;
+  margin-right: 26px;
+}
+.index .chandiintro .chandidiv .xinxi {
+  display: flex;
+  flex-wrap: wrap;
+  width: 440px;
+}
+.index .chandiintro .chandidiv .xinxi .title {
+  height: 40px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #333333;
+}
+.index .chandiintro .chandidiv .xinxi .mess {
+  width: 440px;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999999;
+}

src/pages/page6/index.jsx

@@ -0,0 +1,117 @@
+import { Component } from 'react'
+import { View, Swiper,SwiperItem } from '@tarojs/components'
+import './index.less'
+import Taro from "@tarojs/taro"
+import React,{useState,useEffect} from 'react'
+const went=(url)=>{
+  Taro.navigateTo({
+    url:url
+  })}
+
+const Index= ()=> {
+  const ajax=()=>{
+    Taro.request({
+      url: 'https://sapi.k780.com', //仅为示例，并非真实的接口地址
+      data: {
+        app:'weather.future',
+        //cityId:"101210101",
+        //citynm:'北京',
+        weaId:'94',
+        appkey: '10003',
+        sign:'b59bc3ef6191eb9f747dd4e83c99f2a4',
+        format:'json'
+      },
+      header: {
+        'content-type': 'application/json' // 默认值
+      },
+      success: function (res) {
+        console.log(res.data)
+      }
+    })
+}
+useEffect(()=>{
+  ajax()
+},[])
+  
+  const thinglist = [{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'新疆维吾尔',price:430},{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'新疆维吾尔',price:430}
+  ,{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'杭州',price:430},{title:'大方土特产，独特配方专业人士手艺的测试测试测试',address:'徐州',price:430}]
+    const tulist =[{url:''},{url:''}]
+    const [picnum,setPicnum]=useState(1);
+    const bang =(e)=>{
+      setPicnum(e.detail.current+1)
+    }
+    const banmess={text1:'山东土鸡汤',text2:'认证商品',text3:'享受百日阳光，营养价值超越普通三倍',text4:'发货地址：浙江省杭州市滨江区阿里中心2栋'}
+    const prointropic = [{},{},{}]
+    const chandiintro =[{title:"基地名称1",mess:'介绍文本内容展示绍文本内容展示，介绍文本内容展示绍文本内容展示'},{title:"基地名称2",mess:'介绍文本内容展示绍文本内容展示，介绍文本内容展示绍文本内容展示'}]
+return (
+        <View className="index">
+          <View className="banner">
+          <Swiper
+            className='swiper-body'
+            indicatorColor='#999'
+            indicatorActiveColor='#333'
+            current={0}
+            duration={500}
+            interval={5000}
+            circular
+            autoplay onChange={bang}>
+            {
+              tulist.map((item,index)=>{
+                return(<SwiperItem>
+                  <View className='demo-text-1'></View>
+                </SwiperItem>)
+              })
+            }
+          </Swiper>
+          <View className='change'>{picnum}/{tulist.length}</View>
+          </View>
+          <View className="bannermess">
+            <View className="text1">{banmess.text1}</View>
+            <View className="text2">{banmess.text2}</View>
+            <View className="text3">{banmess.text3}</View>
+            <View className="text4">{banmess.text4}</View>
+          </View>
+          <View className="porintro">
+            <View className="title">商品介绍</View>
+            {
+              prointropic.map((item)=>{
+                return (
+                  <View className='pic'></View>
+                )
+              })
+            }
+          </View>
+          <View className="chandiintro">
+            <View className="introtitle">产地介绍</View>
+            {
+              chandiintro.map((item,index)=>{
+                return (
+                  <View className="chandidiv"style={index==chandiintro.length-1?'padding-bottom:0;border:none;':''}>
+                    <View className="pic"></View>
+                    <View className="xinxi">
+                    <View className="title">{item.title}</View>
+                    <View className="mess">{item.mess}</View>
+                    </View>
+                  </View>
+                )
+              })
+            }
+          </View>
+          <View className="advicetitle">优品推荐</View>
+            {
+              thinglist.map((item,index)=>{
+                return(
+                  <View className="thingdiv" style={index%2==0?'margin-right:10px':''} onClick={went.bind(this,`/pages/page6/index`)}>
+                    <View className="pic"></View>
+                    <View className="title">大方土特产，独特配方专业人士手艺的测试测试测试</View>
+                    <View className="has">认证商品</View>
+                    <View className="address">新疆维吾尔</View>
+                    <View className="price">￥430</View>
+                </View>
+                )
+              })
+            }
+        </View>
+    )
+}
+export default Index

src/pages/page6/index.less

@@ -0,0 +1,157 @@
+page {
+  background: #F5F5F5;
+  padding-bottom: 72px;
+}
+
+.index {
+  background: #F5F5F5;
+  font-family: PingFangSC-Medium, PingFang SC;
+  padding: 34px 24px 0 24px;
+
+  .banner {
+    height: 552px;
+
+    border-radius: 16px 16px 0 0;
+    position: relative;
+
+    .swiper-body {
+      width: 100%;
+      height: 100%;
+    }
+
+    .demo-text-1 {
+      width: 100%;
+      height: 100%;
+      background-color: #E03326;
+    }
+
+    .change {
+      width: 80px;
+      height: 40px;
+      background: rgba(33, 33, 33, .27);
+      border-radius: 24px;
+      position: absolute;
+      top: 488px;
+      left: 598px;
+      font-size: 28px;
+      font-weight: 500;
+      color: #FFFFFF;
+      letter-spacing: 1px;
+      text-align: center;
+    }
+  }
+
+  .bannermess {
+    padding: 40px 0 40px 26px;
+    display: flex;
+    flex-wrap: wrap;
+    background: #FFFFFF;
+    border-radius: 0 0 16px 16px;
+
+    .text1 {
+      width: 518px;
+      font-size: 32px;
+      font-weight: 500;
+      color: #333333;
+    }
+
+    .text2 {
+      font-size: 24px;
+      font-weight: 400;
+      color: #E03326;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 22.32px;
+        height: 23.26px;
+        background: url(../../assets/img/renzheng.png) no-repeat;
+        background-size: 100% auto;
+        margin-right: 10px;
+      }
+    }
+
+    .text3 {
+      font-size: 28px;
+      font-weight: 400;
+      color: #999999;
+      margin: 20px 0 20px 0;
+    }
+
+    .text4 {
+      font-size: 28px;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+
+  .porintro {
+    background: #FFFFFF;
+    border-radius: 16px;
+    padding: 24px 0 32px 0;
+    margin-top: 24px;
+
+    .title {
+      margin: 0 0 54px 24px;
+      font-size: 36px;
+      font-weight: 600;
+      color: #0B0D0E;
+    }
+
+    .pic {
+      width: 90%;
+      height: 470px;
+      margin-left: 5%;
+      background-color: #999999;
+      margin-bottom: 40px;
+    }
+  }
+
+  .chandiintro {
+    background: #FFFFFF;
+    border-radius: 16px;
+    padding: 24px 0 26px 0;
+    margin-top: 24px;
+
+    .introtitle {
+      font-size: 36px;
+      font-weight: 600;
+      color: #0B0D0E;
+      margin-left: 24px;
+      margin-bottom: 20px;
+    }
+
+    .chandidiv {
+      padding: 28px 0 36px 20px;
+      border-bottom: solid 1px #EEEEEE;
+      display: flex;
+
+      .pic {
+        width: 148px;
+        height: 146px;
+        background-color: #E03326;
+        margin-right: 26px;
+      }
+
+      .xinxi {
+        display: flex;
+        flex-wrap: wrap;
+        width: 440px;
+
+        .title {
+          height: 40px;
+          font-size: 28px;
+          font-weight: 500;
+          color: #333333;
+        }
+
+        .mess {
+          width: 440px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+    }
+  }
+}

src/server/weather.js

@@ -0,0 +1,4 @@
+import Http from '../assets/js/server'
+export function weather(data) { //删除学员
+  return Http.get("https://sapi.k780.com", data)
+}