网站电线电话图怎么做/网络销售网站

介绍

样式设计很丑，前端不太好

关于代码中的图片，一个是丛阿里云矢量库下载的图标，一个就是二维码的图像，可以在网上随便生成一个，然后换图片地址就行了

效果

微信登录页面代码

wxml

<!-- 登录页 -->
<view><view class="v1" wx:if="{{flag}}"><view class="v2"><image class="img1" src="../../images/me.png"></image><input type="text" placeholder="请输入用户名/手机"/><input type="password" placeholder="请输入密码"/><view class="v3"><text>注册</text><text class="text2">找回密码</text></view><button class="button">登录</button><button class="button" bindtap="toggleLogin">二维码登录</button></view></view><view class="v4"  wx:else><image class="qr" src="{{qrCode}}"></image><button class="button" bindtap="toggleLogin">账号密码登录</button></view>
</view>

wxss

/* pages/test/test.wxss */
.v1{width: 100%;display: flex;flex-flow: column wrap;justify-content: space-around;align-items: center;
}
.v2{margin-top: 25%;display: flex;flex-flow: column wrap;justify-content: space-around;box-sizing: border-box;border: 1px solid #ccc;background-color: white;align-items: center;padding: 20px 40px 20px 40px;
}
.img1{width: 45px;height: 45px;padding: 10px;align-items: center;
}
input{width: 100%;height: 20%;border: 1px solid #ccc;margin: 5px 10px 10px;border-radius: 5px;font-size: 18rpx;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.v3{display: flex;flex-flow: row wrap;justify-content: space-between;
}
text{/* justify-content: space-between; */font-size: 20px;font-weight: 300px;color: skyblue;
}
.text2{margin-left: 100px;font-size: 20rpx;font-weight: 300px;color: skyblue;
}
.button{width: 30%;height: 5%;font-size: 12px;color: white;background-color: deepskyblue;margin: 5px 5px;
}
.qr{width: 200px;height: 200px;
}
.v4{margin-top: 25%;display: flex;flex-flow: row wrap;justify-content: space-around;
}

js

// pages/test/test.js
Page({/*** 页面的初始数据*/data: {qrCode: "../../images/qr.png",flag: "true",imgToggle: "../../images/qrcode.png",list: [{src: "../../images/rice.png",text: "饭"},{src: "../../images/noodles.png",text: "面"},{src: "../../images/congee.png",text: "粥"},{src: "../../images/drink.png",text: "饮料"}]},toggleLogin: function(){this.setData({flag: !this.data.flag})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

json

{"navigationBarBackgroundColor": "#ADD8E6","navigationBarTextStyle": "black","navigationBarTitleText": "登录","backgroundColor": "#ccc","backgroundTextStyle": "dark","usingComponents": {}
}

---