首页弹出框 样式

pages/Integral/Integral.wxml

@@ -26,7 +26,7 @@
   <view class="bottom">
     <view>
       <van-tabs sticky class="order-tabs">
-        <van-tab title="入账中">
+        <van-tab title="入账中" class="tittle1">
           <van-divider />
           <view class="box">
             <view>
@@ -132,6 +132,9 @@
           <van-divider />
 
         </van-tab>
+        <van-divider />
+        <van-tab title="|"></van-tab>
+
         <van-tab title="收支明细">内容 2</van-tab>
       </van-tabs>
     </view>

pages/Integral/Integral.wxss

@@ -67,18 +67,29 @@ page {
 .account {
   font-size: 30rpx;
 }
+.order-tabs{
+border: 1rpx solid #fa5840;
+}
 
 .order-tabs .van-tab--active .van-ellipsis {
   color: #ff8700;
   /* font-size: 40rpx; */
+
 }
 
 .van-ellipsis {
   font-size: 32rpx;
   margin: 0 auto;
   line-height: 110rpx;
+
 }
 
+.van-ellipsis {
+
+}
+.van-ellipsis tittle1{
+display: none;
+}
 .van-tabs__line {
   display: none;
 }
@@ -109,7 +120,7 @@ page {
   font-size: 33rpx;
   font-family: sans-serif;
   color: #ff8b09;
-font-weight: 800;
+  font-weight: 800;
   /* font-weight: 800; */
   margin-right: 20rpx;
 }

pages/index/index.js

@@ -3,49 +3,60 @@
 const app = getApp()
 
 Page({
-    data: {
-        swiperImgs: [
-            './images/5.png',
-            './images/6.png',
-            './images/7.png',
-            './images/1.png'
-        ],
-        show: true,
+  data: {
+    swiperImgs: [
+      './images/5.png',
+      './images/6.png',
+      './images/7.png',
+      './images/1.png'
+    ],
+    show: true,
+  },
+  showPopup() {
+    this.setData({ show: true });
+  },
 
-    },
-    clickBtn(e) {
-        console.log(e);
-        if(this.data.show){
-            this.setData({
-                show: !this.data.show,
-                caiMing: '',
-                caiCount: '',
-                expire: '',
-                imagePath: '',
-            })
-        }
-    },
-    clickBtnDelete() { 
-        this.setData({
-            show: !this.data.show,
-            caiMing: '',
-            caiCount: '',
-            expire: '',
-            imagePath: '',
-        })
-    },
-    // 事件处理函数
-    bindViewTap() {
-        wx.navigateTo({
-            url: '../logs/logs'
-        })
-    },
-    onLoad() {
-        if (wx.getUserProfile) {
-            this.setData({
-                canIUseGetUserProfile: true
-            })
-        }
-        wx.setNavigationBarTitle({ title: '外卖小程序' })
-    },
+  onClose() {
+    this.setData({ show: false });
+  },
+  CompleteInformation() {
+    wx.navigateTo({
+      url: '../logs/logs'
+    })
+  },
+  clickBtn(e) {
+    console.log(e);
+    if (this.data.show) {
+      this.setData({
+        show: !this.data.show,
+        caiMing: '',
+        caiCount: '',
+        expire: '',
+        imagePath: '',
+      })
+    }
+  },
+  clickBtnDelete() {
+    this.setData({
+      show: !this.data.show,
+      caiMing: '',
+      caiCount: '',
+      expire: '',
+      imagePath: '',
+    })
+  },
+  // 事件处理函数
+  bindViewTap() {
+    wx.navigateTo({
+      url: '../logs/logs'
+    })
+  },
+  onLoad() {
+    if (wx.getUserProfile) {
+      this.setData({
+        canIUseGetUserProfile: true
+      })
+    }
+    wx.setNavigationBarTitle({ title: '外卖小程序' })
+  },
 })

pages/index/index.wxml

@@ -5,7 +5,7 @@
       <van-icon name="search" class="search-icon" />
       <input class="search-ipt" placeholder="搜索商家名称" type="text" value="{{value}}" placeholder-style="color:#9d9d9d" />
       <button class="search-btn" bindtap="Search">搜索</button>
-    </view>+
+    </view>
     <view style="margin: 2%;">
       <view class="" hover-class="none" hover-stop-propagation="false">
         <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="700" circular="true" previous-margin="0rpx" next-margin="0rpx" indicator-color="#999999" indicator-active-color="#ff8700">
@@ -22,11 +22,11 @@
       <view>
         <image class="img-1" src="./images/2.png" mode="" />
       </view>
-      <view style="margin-bottom: 20rpx;">
-        <view style="font-weight: 800;margin-bottom:20rpx; color: #000000;font-size:30rpx">
+      <view style="margin-bottom:40rpx;">
+        <view style="font-weight:bold;margin-bottom:15rpx; color: #000000;font-size:34rpx">
           二食堂二楼麻辣烫麻辣香锅...
         </view>
-        <view style="font-size:25rpx;display: flex;">
+        <view style="font-size:25rpx;display: flex;margin-bottom:30rpx;">
           <view style="color: #b4b4b4;">
             起送
           </view>
@@ -58,11 +58,11 @@
       <view>
         <image class="img-1" src="./images/3.png" mode="" />
       </view>
-      <view style="margin-bottom: 20rpx;">
-        <view style="font-weight: 800;margin-bottom:20rpx; color: #000000;font-size:30rpx">
+      <view style="margin-bottom: 40rpx;">
+        <view style="font-weight:bold;margin-bottom:15rpx; color: #000000;font-size:34rpx">
           二食堂二楼麻辣烫麻辣香锅...
         </view>
-        <view style="font-size:25rpx;display: flex;">
+        <view style="font-size:25rpx;display: flex;margin-bottom:30rpx;">
           <view style="color: #b4b4b4;">
             起送
           </view>
@@ -91,29 +91,51 @@
   </view>
 </view>
 
+<!-- <van-popup show="{{ show }}" bind:close="onClose"  closeable="true" close-icon="close" close-icon-position="bottom-right" custom-class="clc" z-index="1" >
+  <image class="img-2" src="./images/15.png" mode="" />
+  <view class="pop-up">
+    <view class="top">
+      <view style="color: #ffffff;text-align: center;margin-bottom:40rpx;font-family: Arial, Helvetica, sans-serif;font-size: 40rpx;">
+        信息完善
+      </view>
+      <view style="color:#c11b14;text-align: left;font-size: 33rpx;">
+        为校园人员使用，新用户请完善个人信息。
+      </view>
+    </view>
+    <van-divider />
+    <view class="under">
+      <view bindtap="CompleteInformation">
+        完善信息
+      </view>
+    </view> -->
+<!-- <van-icon name="clear" /> -->
+<!-- <van-icon name="clear" bindtap="clickBtnDelete" class="del-icon" color="#ffffff" /> -->
+<!-- </view>
+</van-popup> -->
+
 <view style="font-size:32rpx;">
   <!-- 弹出框 -->
   <!-- hidden="{{show}}" -->
   <view class="all-bottom" hidden="{{show}}">
   </view>
   <view class="pop-up" hidden="{{show}}">
+    <image class="img-2" src="./images/15.png" mode="widthFix" />
     <view class="top">
-      <view style="color: #ffffff;text-align: center;margin-bottom:40rpx;font-family: Arial, Helvetica, sans-serif;">
+      <view style="color: #ffffff;text-align: center;margin-bottom:35rpx;font-family: Arial, Helvetica, sans-serif;font-size: 40rpx;">
         信息完善
       </view>
-      <view style="color:#c11b14;">
-        为校园人员使用，新用户请完善个人信息
+      <view style="color:#c11b14;font-family: Arial, Helvetica, sans-serif;text-align: left;font-size: 33rpx;margin-bottom: 80rpx;">
+        为校园人员使用，新用户请完善个人信息。
       </view>
     </view>
-    <van-divider />
+    <van-divider borderColor="#f48185" />
     <view class="under">
-      <view>
+      <view bindtap="CompleteInformation">
         完善信息
       </view>
-
     </view>
     <!-- <van-icon name="clear" /> -->
-    <van-icon name="close" bindtap="clickBtnDelete" class="del-icon" color="#ffffff" />
+    <van-icon name="clear" bindtap="clickBtnDelete" class="del-icon" color="#ffffff" />
   </view>
 
 </view>

pages/index/index.wxss

@@ -48,7 +48,7 @@ page {
 
 .swiper {
   /* background-color: blue; */
-  height: 330rpx;
+  height: 350rpx;
 }
 
 .swiper-image {
@@ -72,20 +72,21 @@ page {
 
 .img-1 {
   /* margin-left: 15rpx; */
-  width: 200rpx;
+  width: 230rpx;
   height: 160rpx;
   margin-right: 20rpx;
 }
 
 .time {
   width: 100rpx;
-  height: 40rpx;
+  height: 35rpx;
   background: #ff8700;
   font-size: 25rpx;
   margin-left: 20rpx;
   color: #fff;
   text-align: center;
-  line-height: 40rpx;
+  /* align-items: center; */
+  line-height: 35rpx;
   border-radius: 8rpx;
 }
 
@@ -101,51 +102,51 @@ page {
 }
 
 .all-bottom {
-  background-color: black;
+  background-color: rgba(0,0,0,.7);
   opacity: 0.5;
   width: 100%;
   height: 100%;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
-  z-index: 11;
-}
 
-.top {
-  height: 350rpx;
-  padding: 12%;
-  box-sizing: border-box;
-  padding-top: 100rpx;
 }
 
-.block {
-  width: 120px;
-  height: 120px;
-  background-color: #fff;
-}
 
 .pop-up {
-  width: 520rpx;
-  height: 500rpx;
-  /* background-color: #f47861; */
-  position: absolute;
+  width: 550rpx;
+  height: 650rpx;
   text-align: center;
+  /* background-color: #f47861; */
+  position: relative;
   opacity: 100;
-  left: 120rpx;
-  top: 350rpx;
-  z-index: 12;
-  background: linear-gradient(#ff7e4c, #f62446);
-  /* padding-bottom: 70rpx; */
+  left: 100rpx;
+  bottom: 630rpx; 
+  /* /* z-index: 12; */
+  background: linear-gradient(#f79654, #f5815e, #f37064, #f26a66, #f05f68);
+  border-radius: 10rpx;
+}
+.top {
+  /* height:550rpx; */
+  padding: 0 12%;
+  box-sizing: border-box;
+  padding-top: 285rpx;
+}
+
+.img-2 {
+  position: absolute;
+  top: -160rpx;
+  right: 10rpx;
+  width: 530rpx;
 }
 
 .under {
-  text-align: center;
-  line-height: 70rpx;
+  line-height: 40rpx;
+  font-size: 33rpx;
   color: #fdeff0;
 }
 
 .del-icon {
-  margin-top: 70rpx;
-  border-radius: 100%;
-  font-size: 50rpx;
-}
+  margin-top: 80rpx;
+  font-size: 80rpx;
+}

pages/my/my.js

@@ -13,6 +13,12 @@ Page({
       url:'../Integral/Integral'
     })
   },
+  onOrder(){
+    console.log('我的订单');
+    wx.navigateTo({
+      url:'../Integral/Integral'
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/my/my.wxml

@@ -60,7 +60,7 @@
         我的订单
       </view>
       <!-- 箭头 -->
-      <view class="order-right">
+      <view class="order-right" bindtap="onOrder">
         >
       </view>
     </view>

project.private.config.json

@@ -42,6 +42,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/Integral/Integral",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }