微信小程序 “我的”界面

微信小程序 “我的”界面

直接上图

在这里插入图片描述

WXML

<view>
  <view class="userinfo">
      <image  class="userinfo-avatar" src="{{heads}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{nickname}}</text>
  </view>
  <view class="hr"></view>

<navigator url="../mypost/mypost?id={{openid}}" open-type="navigate">
<view class='item'>
    <view class="title">我的东西</view>
    <view class="detail2">
      <text> ></text>
    </view>
    </view>
</navigator>
  

   <navigator url="../mycollect/mycollect?id={{openid}}" open-type="navigate">
  <view class="line"></view>
  <view class="item">
    <view class="title">我的收藏</view>
    <view class="detail2">
      <text> ></text>
    </view>
  </view>
 </navigator>

  <view class="line"></view>

  <navigator url="../aboutus/aboutus" open-type="navigate">
  <view class="item">
    <view class="title">关与我们</view>
    <view class="detail2">
      <text> ></text>
    </view>
  </view>
  </navigator>

 <view class="line"></view>
</view>

WXSS

/* pages/mine/mine.wxss */
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #eb6161;
  width: 100%;
  height: 300rpx;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: black;
}

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

/* 用户中心 */

.hr {
  width: 100%;
  height: 15px;
  background-color: #f4f5f6;
}
.item {
  display: flex;
  flex-direction: row;
}
.title {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  font-size: 15px;
}

.detail2 {
  font-size: 15px;
  position: absolute;
  right: 10px;
  height: 50px;
  line-height: 50px;
  color: #888;
}

.line {
  border: 1px solid #ccc;
  opacity: 0.2;
}

  • 5
    点赞
  • 93
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
汽车界面设计需要考虑到以下几个方面: 1. 用户体验:汽车界面设计需要考虑用户的体验感受,让用户在驾驶过程中能够快速便捷地完成操作,并且不影响驾驶安全。简洁明了的界面、大而清晰的按钮、易于理解的图标、直观的指示灯等都是提高用户体验的关键。 2. 可视性:汽车界面设计需要考虑到可视性,尤其是在夜间行驶时。设计师需要选择适合夜间行驶的颜色和亮度,以确保用户能够清晰地看到所有信息。 3. 功能性:汽车界面设计需要考虑到功能性。设计师需要确定哪些功能是最常用的,然后将它们放在最方便的位置,以便用户能够快速找到并使用。 4. 互动性:汽车界面设计需要考虑到互动性,即用户如何与界面交互。设计师需要选择合适的交互方式,例如触摸屏、按钮、旋钮等,以便用户能够轻松地完成操作。 针对微信小程序的汽车界面设计,可以考虑以下几个方面: 1. 界面设计:微信小程序界面设计需要遵循微信小程序的设计规范,如简洁、易用、符合用户习惯等。可以采用卡片式设计,将各个功能模块分开,方便用户快速找到所需功能。 2. 颜色设计:在微信小程序汽车界面设计中,颜色的选择需要考虑到可视性和舒适性。可以选择明亮的颜色,与黑色底板形成鲜明对比,同时也需要考虑到夜间行驶的可视性。 3. 按钮设计:按钮的设计需要大而清晰,易于点击。可以采用扁平化的设计风格,将按钮颜色和背景色分开,以减少干扰。 4. 功能设计:在微信小程序汽车界面设计中,需要考虑到用户最常用的功能,例如导航、音乐、电话等,将它们放在最方便的位置,以便用户能够快速找到并使用。 最后,需要注意的是,微信小程序的汽车界面设计需要考虑到驾驶安全,不应该过于复杂,而应该尽可能简单明了,方便用户在驾驶过程中使用。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值