首页 > 小程序教程 > 微信小程序饮茶机专题图片页面样式设计制作开发教程

微信小程序饮茶机专题图片页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序阿姨帮家政保洁服务首页样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="my-container">
  <modal class="login" title="请登录你的账号" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="signConfirm">
     <label>
       <view>账号:</view>
       <input placeholder="请输入你的账号" bindinput="saveUsername" />
     </label>
     <label>
       <view>密码:</view>
       <input password="{{true}}" placeholder="请输入你的密码" bindinput="savePassword" />
     </label>
  </modal>
  <view class="box" wx:if="{{boxHidden}}">
    <view class="header">
      <view class="headerTop">
        <image class="touxiang" src="/images/myImages/hptouxiang.jpg" mode="aspectFit"></image>
        <view class="info">
          <p class="tele">{{modal.username}}</p>
          <p class="intro">
            <b class="puka">普卡</b>
            <b class="vip">VIP</b>
          </p>
        </view>
      </view>
      <view class="headerBottom">
        <image src="/images/myImages/vip.png" mode="aspectFit"></image>
        <image class="gray" src="/images/myImages/vip2.png" mode="aspectFit"></image>
        <image class="gray" src="/images/myImages/vip3.png" mode="aspectFit"></image>
        <image class="gray" src="/images/myImages/vip4.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="jifen">
      <ul>
        <li class="nowJiFen">
          <text class="num">300</text>
          <b>积分</b>
        </li>
        <li class="youhuijuan">
          <text class="num">0</text>
          <b>优惠券</b>
        </li>
        <li class="guanzhu">
          <text>关注微信</text>
        </li>
        <li class="youhuijuan">
          <text class="num">+50</text>
          <b>签到送积分</b>
        </li>
      </ul>
    </view>
    <view class="jianju"></view>
    <view class="person">
      <ul>
        <li wx:for="{{imgBox}}" wx:for-item="item">
          <span><image src="{{item.icon}}"></image></span>
          <b>{{item.info}}</b>
          <a><image src="/images/myImages/you.png"></image></a>
        </li>
      </ul>
    </view>
    <view class="tuichu">
      <text bindtap="exit">退出登录</text>
    </view>
  </view>
</view>
 
二、wxss样式文件代码如下:
.my-container .login label {
  display: flex;
  flex-direction: row;
  padding-bottom: 20rpx; }
  .my-container .login label view {
    width: 120rpx;
    text-align: right; }
  .my-container .login label input {
    flex: 1;
    border-bottom: 1px solid #000; }

.my-container .header {
  width: 100%;
  background-color: #66cbff; }

.my-container .headerTop {
  display: flex; }

.my-container .headerTop .touxiang {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin: 20px 0 0 25%; }

.my-container .info {
  flex: 1;
  padding-top: 36px;
  padding-left: 20px;
  display: flex;
  flex-direction: column; }

.my-container .tele {
  flex: 1;
  color: #fff;
  font-size: 14px; }

.my-container .intro {
  flex: 1; }

.my-container .intro .puka {
  background-color: #4069ff;
  padding: 2px 6px;
  font-size: 10px;
  color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px; }

.my-container .intro .vip {
  padding: 2px 6px;
  background-color: #fff;
  font-size: 12px;
  color: #f5b32b;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px; }

.my-container .headerBottom {
  width: 60%;
  height: 26px;
  margin-left: 25%;
  padding: 5px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .my-container .headerBottom image {
    height: 26px;
    flex: 1; }
  .my-container .headerBottom .gray {
    -webkit-filter: grayscale(1);
    filter: gray;
    filter: grayscale(1); }

.my-container .jifen {
  width: 100%;
  height: 60px; }
  .my-container .jifen ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 10px 0; }
    .my-container .jifen ul li {
      flex: 1;
      border-left: 1px solid #C6C7C9;
      width: 25%;
      height: 34px;
      text-align: center; }
    .my-container .jifen ul .nowJiFen {
      border: none; }
      .my-container .jifen ul .nowJiFen .num {
        color: #e30013;
        font-size: 14px;
        display: block;
        font-weight: bold; }
      .my-container .jifen ul .nowJiFen b {
        font-size: 12px;
        color: #595758; }
    .my-container .jifen ul .youhuijuan .num {
      color: #e30013;
      font-size: 14px;
      display: block;
      font-weight: bold; }
    .my-container .jifen ul .youhuijuan b {
      font-size: 12px;
      color: #595758; }
    .my-container .jifen ul .guanzhu text {
      padding: 3px;
      font-size: 12px;
      color: #fff;
      background-color: #4b9536;
      border-radius: 2px; }

.my-container .jianju {
  background-color: #C6C7C9;
  height: 12px; }

.my-container .person ul {
  width: 100%; }
  .my-container .person ul li {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #C6C7C9;
    display: flex; }
    .my-container .person ul li span {
      padding: 7px; }
      .my-container .person ul li span image {
        width: 26px;
        height: 26px; }
    .my-container .person ul li b {
      padding-left: 30px;
      font-size: 12px;
      line-height: 40px;
      color: #595758; }
    .my-container .person ul li a {
      flex: 1;
      text-align: right; }
      .my-container .person ul li a image {
        width: 8px;
        height: 16px;
        margin-top: 12px;
        margin-right: 36px; }

.my-container .tuichu {
  width: 100%;
  padding-top: 30rpx;
  padding-left: 20%;
  box-sizing: border-box; }
  .my-container .tuichu text {
    background-color: #65a51e;
    display: block;
    width: 60%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 10rpx;
    text-align: center;
    color: #fff;
    font-size: 14px; }
三、js页面代码如下:
Page({
  data: {
    modalHidden:false,
    boxHidden:false,
    modal:{
      "username":"",
      "password":""
    },
    nameCheck:false,
    imgBox:[
      {
        "icon":"/images/myImages/l-dingdan.png",
        "info":"我的订单"
      },
      {
        "icon":"/images/myImages/l-shoucang.png",
        "info":"我的收藏"
      },
      {
        "icon":"/images/myImages/l-address.png",
        "info":"收货地址管理"
      },
      {
        "icon":"/images/myImages/l-jifen.png",
        "info":"积分商城"
      },
      {
        "icon":"/images/myImages/l-help.png",
        "info":"帮助中心"
      },
      {
        "icon":"/images/myImages/l-kefu.png",
        "info":"联系客服"
      },
      {
        "icon":"/images/myImages/l-about.png",
        "info":"关于我们"
      }
    ]
  },
  onLoad: function () {

  },
  onShow: function () {
    if(wx.getStorageSync("username")==""){
      this.setData({
        modalHidden:false,
        boxHidden:false
      })
      console.log("no");
    }else{
      var getUsername=wx.getStorageSync("username");
      var getPassword=wx.getStorageSync("password");
      this.setData({
        modalHidden:true,
        boxHidden:true,
        'modal.username': getUsername,
        'modal.password': getPassword
      })
      console.log("has");
    }
  },
  signConfirm:function(){
    if(this.data.nameCheck){
      wx.setStorageSync('username', this.data.modal.username);
      wx.setStorageSync('password', this.data.modal.password);
      this.setData({
        modalHidden:true,
        boxHidden:true
      })
    }
  },
  saveUsername:function(event){
    if(event.detail.value!=""){
      this.setData({
        'modal.username': event.detail.value,
        nameCheck:true
      });
    }
  },
  savePassword:function(event){
    this.setData({
      'modal.password': event.detail.value
    });
  },
  exit:function(){
    wx.setStorageSync("username","");
    wx.setStorageSync("password","");
    this.setData({
      modalHidden:false,
      boxHidden:false
    })
  }
});

模板简介:该模板名称为【微信小程序饮茶机专题图片页面样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 16,297次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-04
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 微信公众平台 企业网站 Bootstrap 微信模板 单页式简历模板 微信文章 html5 表格式简历模板 响应式
您可能会喜欢的其他模板