uniapp怎么制作如图所示登录页面

Question

使用uniapp
任务描述
根据客户给定的需求描述，利用跨平台开发工具或原生开发工具，编码实现任务需求功能设计。
任务1：实现用户登录界面（12分）

登录界面
设计智慧城市App，利用移动开发工具HbuilderX打开项目，编码实现智慧城市App的登录页面，包括App的标题、账户和密码、自动登录切换按钮、登录按钮，以及微信、QQ和sina微博快捷登录的图标，如图1所示。输入账户和密码后，点击登录按钮，进入主界面。
任务2：实现主界面（15分）
进入App主页面（主页），如图2所示。彰显智慧城市风采，打造智慧型服务大厅，科技赋能，创新智能，打造视、听、触体验具佳的业务服务大厅，同时供应多种智慧城市解决方案。

主页面
1.显示系统广告轮播图，点击轮播图跳转至新闻对应详情页面。
2.显示智慧城市各领域应用服务入口，以图标和名称为单元宫格方式显示，手机端每行显示3个，共两行，第2行最后一个显示“更多服务”。
3.显示底部导航栏，采用图标加文字方式显示，图标在上，文字在下，共四个图标分别为首页、新闻、数据分析、个人中心，点击标签进入对应页面，并颜色标记当前页面所在导航栏。
注：轮播图和应用服务资源通过服务器API接口获取。
任务3：实现新闻界面（9分）
点击App底部新闻标签，进入新闻页面，如图3-1所示。

新闻页面

新闻详情页面
显示新闻列表，列表项包括图片、新闻标题、发布者、发布时间等信息，点击新闻列表项进入详情页面，如图3-2所示。
注：数据详见API接口文档。
任务4：数据分析（14分）
在App主页面上，点击底部导航栏“数据分析”，进入数据分析页面，如图4所示。

数据分析页面
智慧城市重要职能是采集、存储、分析、挖掘城市运行中的所承受的大数据，具备全面感知和全面分析的能力，同时能够展示和扩展。
智慧城市的数据分析建设，有利于解决城市发展问题，有利于提升城市信息管理水平，主要包括以下功能。
1.条形图：请分析id为50-53新闻信息的点赞数量，按照新闻类别进行分析，横坐标为新闻标题（显示标题前4个字，其余使用“..”代替），纵坐标为新闻点赞数；
2.折线图：请分析统计所有车牌照所在地变化曲线，横坐标为牌照所在地名称，纵坐标为牌照所在地统计数，如（横坐标为甘A、甘B、甘C，纵坐标为10,20,30）
3.饼状图：请分析各招聘岗位占总招聘岗位的比例。（图内显示相应岗位名称及比例值）
注：接口数据详见API接口文档（需要自行处理、合并封装、解析相应接口返回的数据）。

Answer 1

<template>
    <view class="wrap">
      <view class="bgwhite info">
        <view class="item">
            <view class="label">账号</view>
            <input placeholder="请输入账号" v-model="account"/>
        </view>
        <view class="item">
            <view class="label">密码</view>            
            <input placeholder="请输入密码" v-model="passwd" type="password"/>
        </view>
      </view>
      <view class="bgwhite info auto">
          <view class="item">
              <view class="label">自动登录</view>            
              <switch :checked="autologin" @change="setAuto"/>
          </view>
      </view>
      <button type="primary" class="login" @click="doLogin">登录</button>
      <view class="reg">
          <a href="#">注册账号</a>
          <view class="line">|</view>
          <a href="#">忘记密码</a>
      </view>
    <view class="footer">
        <image src=""></image>
        <image src=""></image>
        <image src=""></image>
    </view>
    </view>
</template>

<script>
    import store from '@/store/index.js';//vuex
    export default {
        data() {
            return {
                account:'',//存储账号信息
                passwd:'',//存储密码
                autologin:false//存储是否自动登录
            }
        },        
        onLoad() {
            let token=uni.getStorageSync('token');//获取storage中的token，判断上次是否是自动登录保存了身份token
            if(token){//自动登录
                store.commit('setToken',token);//更新vuex
                uni.redirectTo({url:'/pages/index/index'});//跳转到需要的页面，这里跳转首页
            }
        },
        methods: {
            setAuto(e){this.autologin=e.detail.value;},
            doLogin(){
                if(this.account==''){uni.showModal({content:'请输入账号！',showCancel:false});return false}
                if(this.passwd==''){uni.showModal({content:'请输入密码！',showCancel:false});return false}
                
                //显示加载等待层
                uni.showLoading({mask:true,title:'正在验证信息...'});
                
                //验证通过发送请求,un.request更多配置参考：https://uniapp.dcloud.net.cn/api/request/request.html#request
                uni.request({
                    url:'http://124.93.196.45:10001/prod-api/api/login',
                    method:'POST',
                    data:{
                        username:this.account,
                        password:this.passwd
                    },
                    headers:{'content-type':'application/json'},
                    success:(res)=>{
                        if(res.data.code==200){//成功，跳转用户后台或者需要的页面
                            if(this.autologin){//自动登录，保存token到localStorage中
                                uni.setStorageSync('token',res.data.token);
                                store.commit('setToken',token);//更新vuex，以便其他页面使用
                            }
                            else uni.removeStorageSync('token');
                            uni.redirectTo({url:'/pages/index/index'});
                        }
                        //失败提示错误信息
                        else uni.showModal({content:res.data.msg,showCancel:false});
                    },
                    fail(res){
                        uni.showModal({content:'请求失败！',showCancel:false});
                    },
                    complete(){uni.hideLoading()}
                })
            }
        }
    }
</script>
<style>
page{background-color: #f0eff4;font-size: 16px;}
.wrap{max-width:480px;margin: 0 auto;}
.bgwhite{background-color: #fff;}
.info{margin-top: 25px;border:solid 1px #ccc;padding:0 20px;margin-bottom:10px;}
.info .item{display: flex;padding:10px 0;}
.info .item:first-of-type{border-bottom: solid 1px #eee;}
.info .item .label{margin-right:30px;}
input{flex-grow:1}
.auto{margin-top: 10px;}
.auto .item{line-height: 30px;justify-content: space-between}
.login{line-height: 55px;margin: 30px 0;font-size: 18px;}
.reg{text-align: center;}
.reg .line{padding:0 10px;display: inline-block;}
.reg a{color: #6096b9;text-decoration:  none;}

.footer{position:absolute;bottom:40px;text-align:center;left:0;width:100%;}
.footer image{border-radius: 50%;border:solid 1px #eee;background-color: #ccc;width:60px;height: 60px;margin-right: 30px;display: inline-block;}
.footer image:last-of-type{margin-right: 0;}
</style>

设置pages.json中这个页面的style

{
    "pages": [
        {
            "path" : "pages/loginpage/loginpage",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "智慧城市",
                "enablePullDownRefresh": false,
                "navigationBarBackgroundColor": "#f7f7f7"
            }
            
        }]
......其他配置
}