test页面

zhiyangdu
1 parent cce87061
Showing 4 changed files with 380 additions and 2 deletions
src/main.js
src/pages/test/test.less
src/pages/test/test.vue
src/router/index.js
@@ -50,7 +50,7 @@ import &#39;url-search-params-polyfill&#39;;
 Vue.config.productionTip = false;
 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
-Vue.prototype.mode = "dev";
+Vue.prototype.mode = "prod";
 // 微信JS-SDK对象
 Vue.prototype.jweixin = {
+@charset "UTF-8";
+
+.search-box {
+    background-color: #ffffff;
+    min-height: 100vh;
+    .nav {
+        position: fixed;
+        top: 0;
+        background-color: #FAFBFD;
+    }
+    .pl {
+        background-color: transparent;
+        width: 750px;
+        height: 104px;
+    }
+    .pages-box {
+        .infinite-box {
+            .list-com + .list-com {
+                /deep/ .spacing-box {
+                    background-color: #F9F9F9;
+                    width: 100%;
+                    height: 14px;
+                }
+            }
+        }
+    }
+}
+<template>
+<div>
+  <!-- 搜索 -->
+  <div class="search_box">
+    <div class="search">
+      <div class="left">
+        供给
+        <span @click="dropDownMenuShow=true" class="icon_triangle">
+        </span>
+        <!-- 下拉选项 -->
+        <div v-show="dropDownMenuShow" @click="dropDownMenuShow=false"  class="drop_down_menu">
+           <span class="up_triangle">
+          </span>
+          <div class="box">
+            <div class="item">
+              求购
+            </div>
+            <div class="item">
+              供给
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--分割线 -->
+      <div class="line"> </div>
+      <!--搜索框-->
+      <div class="right">
+        <input  @focus="handleFocus"
+                  @blur="handleblur"
+                  placeholder="请输入货品关键字" 
+                  type="text" />
+      </div>
+    </div>
+    <div class="cancel">取消</div>
+  </div>
+  <!-- 分类 -->
+  <div class="classification_box">
+        <div class="item">
+          品类
+          <span class="icon_triangle">
+          </span>
+        </div>
+         <!--分割线 -->
+        <div class="line"> </div>
+        <div class="item">
+          供货期
+          <span class="icon_triangle">
+          </span>
+        </div>
+         <!--分割线 -->
+        <div class="line"> </div>
+        <div class="item">
+          地区
+          <span class="icon_triangle">
+          </span>
+        </div>
+  </div>
+  <!-- item -->
+  <div class="item_box">
+    <!-- 用户信息 -->
+    <div class="user_info">
+      <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
+      <div class="name">陕西省-张三-20100759</div>
+    </div>
+    <!-- 描述 -->
+    <div class="desc">
+      纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加
+    </div>
+    <!-- 图片库 -->
+    <div class="img_box">
+      <van-image
+            class="img"
+            fit="cover"
+            lazy-load
+            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
+       <van-image
+            class="img"
+            fit="cover"
+            lazy-load
+            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
+         <van-image
+            class="img"
+            fit="cover"
+            lazy-load
+            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>          
+    </div>
+    <!-- 地址信息 -->
+    <div class="address_info">
+      <div class="left">
+           <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
+           陕西省 西安市 西安区
+      </div>
+      <div class="right">
+        2020-09-23
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      dropDownMenuShow:false,
+    }
+  },
+//部件
+ components: {
+ },
+//静态
+ props: [
+],
+//对象内部的属性监听，也叫深度监听
+ watch: {
+ },
+//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
+ computed: { 
+ },
+//方法表示一个具体的操作，主要书写业务逻辑；
+ methods: { 
+       /* 使文本框出现在视野内 */
+    // 键盘弹起
+    handleFocus(event) {
+      clearTimeout(this.timer);
+    },
+    // 键盘回落
+    handleblur() {
+      this.timer = setTimeout(() => {
+        document.body.scrollTop = 0;
+        window.pageXOffset = 0;
+        document.documentElement.scrollTop = 0;
+      }, 100);
+    },
+    // 安卓手机下弹起和收起
+    androidkeyboardOn() {
+      const innerHeight = window.innerHeight;
+      window.addEventListener("resize", () => {
+        const newInnerHeight = window.innerHeight;
+        if (innerHeight > newInnerHeight) {
+          this.androidKeyBoard = true;
+        } else {
+          this.androidKeyBoard = false;
+        }
+      });
+    },
+ },
+//请求数据
+ created() {
+},
+ mounted() {
+}
+}
+</script>
+
+<style scoped lang="less" rel="stylesheet/less">
+.icon_triangle{
+    display: block;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #4A4A4A;
+    margin-left: 10px;
+}
+.search_box{
+  display: flex;
+  .search{
+    width: 604px;
+    height: 58px;
+    background: #F9F9F9;
+    border-radius: 32px;
+    display: flex;
+    margin: 20px 30px;
+    .left{
+      height: 37px;
+      font-size: 26px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 37px;
+      margin:11px 10px 11px 30px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      .drop_down_menu{
+        position: absolute;
+        top: 50px;
+        left: -36px;
+        .up_triangle{
+          display: block;
+          width: 0;
+          height: 0;
+          border-left: 12px solid transparent;
+          border-right: 12px solid transparent;
+          border-bottom: 12px solid rgba(0, 0, 0, 0.5);
+          margin-left: 40px;
+        }
+        .box{
+          width: 160px;
+          height: 160px;          
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 18px;
+          .item{
+            height: 40px;
+            font-size: 28px;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 40px;
+            padding: 20px 0;
+            text-align: center;
+          }
+          .item:first-child{
+            margin: 0 20px;
+            border-bottom: solid 4px #999999;
+          }
+        }
+      }
+    }
+    .line{
+      width: 1px;
+      height: 22px;
+      background-color: #858585;
+      margin: 18px 20px 18px 15px;
+    }
+    .right{
+      flex: 1;
+      input{
+        width: 100%;
+        line-height: 58px;
+        outline-style: none;
+        border:0;
+        border-radius: 32px;
+        background: #F9F9F9;
+        font-weight: 400;
+        color: #333;
+        font-weight: 400;
+        font-size: 26px;
+      }
+    }
+  }
+  .cancel{
+    height: 58px;
+    line-height: 58px;
+    font-size: 28px;
+    font-weight: 400;
+    color: #F5A623;
+    margin: 20px 30px 20px 0;
+  }
+}
+.classification_box{
+  display: flex;
+  align-items: center;
+  .item{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .line{
+    width: 1px;
+    height: 24px;
+    background-color: #DCDCDC;
+  }
+}
+// 页面信息
+.item_box{
+  margin: 20px;
+  padding: 30px 20px 20px 20px;
+  background-color: #fff;
+  border-radius: 16px;
+  .user_info{
+    display:flex;
+    .pic{
+      display:block;
+      width:80px;
+      height:80px;
+      border-radius: 50%;
+      margin-right: 90px;
+    }
+    .name{
+      flex: 1;
+      height: 80px;
+      font-size: 30px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 80px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .desc{
+  height: 74px;
+  font-size: 26px;
+  font-weight: 400;
+  color: #666660;
+  line-height: 37px;
+  margin-top: 30px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  }
+  .img_box{
+    width: 100%;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    list-style: none;
+    .img{
+      padding: 5px;
+      flex:1
+    }
+  }
+  .address_info{
+    margin-top:30px;
+    font-size:24px;
+    font-weight: 300;
+    color: #9A9A9A;
+    line-height: 33px;
+    .left{
+      display:flex;
+      align-items: center;
+      float:left;
+      img{
+        display:block;
+        width:22px;
+        height:22px;
+        margin-right: 10px;
+      }
+    }
+    .right{
+      float:right;
+    }
+  }
+}
+</style>
+
@@ -158,7 +158,18 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
-                }
+                },
+                {
+                  // 暂未开通
+                  path: "/test",
+                  name: "test",
+                  component: resolve => {
+                      require(["@/pages/test/test"], resolve);
+                  },
+                  meta: {
+                      requireAuth: false
+                  }
+              }
             ]
         },
         {