手机端 页面设计

<template>
  <div class="MobilePhone">
    <van-row>
      <van-row>
        <img
          style="width: 100%; height: 30%"
          src="../../assets/images/login-background.jpg"
          alt=""
        />
      </van-row>
      <van-row type="flex" justify="center">
       <van-col span="22">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
         
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
        
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field name="checkbox">
          <template #input>
            <van-checkbox v-model="checkbox" shape="square" >记住密码</van-checkbox>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button style="width:100%" loading  type="info" loading-text="正在登录..."
            >提交</van-button
          >
        </div>
      </van-form>
    </van-col>
    </van-row>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "MobilePhoneLogin",

  data() {
    return {
      username: "",
      password: "",
      checkbox:false
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>

<template>
  <div class="MobilePhone">
    <van-nav-bar title="首页" style="background-color: #257bf6" />
    <van-row>
      <img
        style="width: 100%; height: 20%"
        src="../../assets/images/login-background.jpg"
        alt=""
      />
    </van-row>
    <van-row style="margin-top: 20px">
      <van-col span="1"></van-col>
      <van-col span="14" style="margin-left: 10px">
        <div
          style="
            border-left: 3px solid #257bf6;
            padding-left: 10px;
            font-size: 18px;
            font-weight: 600;
          "
        >
          应用卡片
        </div>
      </van-col>

      <van-col
        span="4"
        style="margin-left: 50px; font-size: 16px; color: dimgray"
        >更多 ></van-col
      >
      <van-col span="2"></van-col>
    </van-row>
    <van-row style="margin-top: 40px" type="flex" justify="center">
      <van-col span="5">
        <div>
          <div style="text-align: center">
            <van-icon size="36" color="#418AEC" name="cluster" />
          </div>
          <div style="text-align: center; margin-top: 10px">流程</div>
        </div>
      </van-col>
      <van-col span="5">
        <div>
          <div style="text-align: center">
            <van-icon size="36" color="#418AEC" name="chat" />
          </div>
          <div style="text-align: center; margin-top: 10px">信息</div>
        </div>
      </van-col>
      <van-col span="5">
        <div>
          <div style="text-align: center">
            <van-icon size="36" color="#EF7916" name="invitation" />
          </div>
          <div style="text-align: center; margin-top: 10px">邮件</div>
        </div>
      </van-col>
      <van-col span="5">
        <div>
          <div style="text-align: center">
            <van-icon size="36" color="#418AEC" name="label" />
          </div>
          <div style="text-align: center; margin-top: 10px">公文</div>
        </div>
      </van-col>
    </van-row>
    <van-row style="margin-top: 40px" type="flex" justify="center">
      <van-col span="5">
        <div>
          <div style="text-align: center">
            <van-icon size="36" color="#3A81C4" name="graphic" />
          </div>
          <div style="text-align: center; margin-top: 10px">督查督办</div>
        </div>
      </van-col>
      <van-col span="5">
        <div>
          <div style="text-align: center">
            <van-icon size="36" color="#20B385" name="wap-nav" />
          </div>
          <div style="text-align: center; margin-top: 10px">全部</div>
        </div>
      </van-col>
      <van-col span="5"></van-col>
      <van-col span="5"></van-col>
    </van-row>
    <van-tabbar fixed v-model="active">
     
      <van-tabbar-item icon="home-o" >首页</van-tabbar-item>
      <van-tabbar-item icon="records" dot>代办/已办</van-tabbar-item>
      <van-tabbar-item icon="other-pay" dot>消息</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "MobilePhone",

  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__title {
  color: #ffffff;
}
</style>

<template>
  <div class="MobilePhone">
    <van-nav-bar style="background-color: #257bf6" title="督查督办" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="weapp-nav" size="18" />
      </template>
    </van-nav-bar>
    <van-notice-bar
  left-icon="volume-o"
  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
<van-card
  num="2"
  price="2.00"
  title="商品标题"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag style="margin-right: 5px;" plain type="primary">已办件</van-tag>
    <van-tag plain type="primary">会以决策</van-tag>
  </template>
  
</van-card>


    <van-tabbar fixed v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="records" dot>代办/已办</van-tabbar-item>
      <van-tabbar-item icon="other-pay" dot>消息</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "fileList",

  data() {
    return {
       
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>

::v-deep .van-nav-bar__title {
  color: #ffffff;
}
::v-deep .van-nav-bar__text{
  color: #ffffff;
}
::v-deep .van-icon-weapp-nav:before{
  color: #ffffff;
}

::v-deep .van-nav-bar .van-icon{
  color: #ffffff;
}
</style>