uniapp用户页面模板,个人中心页面 含夜间模式模板

uniapp用户页面模板,个人中心页面 含夜间模式模板-小白技术论坛
uniapp用户页面模板,个人中心页面 含夜间模式模板
此内容为付费资源,请付费后查看
6.6
立即购买
您当前未登录!浏览器缓存保存为30天,建议您登陆后购买,可保存购买订单
禁止商业运营,仅供学习研究
创作不易,请作者喝杯奶茶吧!
付费资源

uniapp小程序单页模板:会员中心页面,支持白天/夜间模式,不太懂小程序布局的可以参考下。

提示:部分组件是图片暂替的,你只需要把图片对应的view层代码替换你的组件即可。

食用教程

解压后将pages对应的页面代码复制到你的项目中,将根目录下App.vue中style属性也复制到你的项目中

代码

template

<view class="flex-col page">
  <view class="flex-col flex-auto group">
    <view class="flex-row justify-between items-center section">
      <text class="text">9:41</text>
      <view class="flex-row space-x-6">
        <image class="image" src="https://图片资源地址/demo-img/2023/15/7179b9dd72895979b9abc58515f50dd7.png" />
        <image class="image_2" src="https://图片资源地址/demo-img/2023/15/35c9db779f9aa08731ed5873c714ad60.png" />
        <image class="image_3" src="https://图片资源地址/demo-img/2023/15/c93dad496b31826273cf6a6c1e594276.png" />
      </view>
    </view>
    <view class="flex-col section_2 space-y-25">
      <view class="flex-row justify-center items-center relative group_2">
        <image class="image_6" src="https://图片资源地址/demo-img/2023/15/07a4c66c1715e7b61a0c741c48a06702.png" />
        <view class="flex-col justify-start items-start group_3 pos">
          <image
            class="image_4"
            src="https://图片资源地址/63eecd7c5a7e3f0310779c98/63f6bc53b98f5d001156f4a5/cf2c824a9b61e93cbc0b79242079be10.png"
          />
          <image
            class="image_5 pos_2"
            src="https://图片资源地址/demo-img/2023/15/8459a08484690fda8d184d3491f06471.png"
          />
        </view>
      </view>
      <view class="flex-col group_4">
        <view class="flex-col justify-start relative">
          <view class="flex-col group_5">
            <image
              class="shrink-0 self-start image_7"
              src="https://图片资源地址/demo-img/2023/15/868f2d9e34fd5fa47c068f8efa3a4937.png"
            />
            <view class="flex-col justify-start relative group_6">
              <view class="flex-col justify-start items-end image-wrapper">
                <image
                  class="image_14"
                  src="https://图片资源地址/demo-img/2023/15/efaca6da54e7e1291e7d9b764aa953e1.png"
                />
              </view>
              <image
                class="image_13 pos_9"
                src="https://图片资源地址/demo-img/2023/15/7049af687780437c514da4dd2bd3bfec.png"
              />
            </view>
          </view>
          <image
            class="image_8 pos_3"
            src="https://图片资源地址/demo-img/2023/15/76971e6afe565594769e85f0e505e5ed.png"
          />
          <image
            class="image_9 pos_4"
            src="https://图片资源地址/demo-img/2023/15/bfcbafcb87b5aff9e0d596bc2262eaa1.png"
          />
          <image
            class="image_10 pos_5"
            src="https://图片资源地址/demo-img/2023/15/c3f09a34bd5f728b6d72ba32c0225490.png"
          />
          <image
            class="image_10 pos_6"
            src="https://图片资源地址/demo-img/2023/15/4b70b951f7723e10c9f82446ab07b30e.png"
          />
          <image
            class="image_11 pos_7"
            src="https://图片资源地址/demo-img/2023/15/64ebee8097f55ca0d82bbe302ec1fe46.png"
          />
          <image
            class="image_12 pos_8"
            src="https://图片资源地址/demo-img/2023/15/2438d4afc78f5c410b6b727474febcb4.png"
          />
        </view>
        <view class="flex-row justify-between relative group_7">
          <view class="section_4"></view>
          <view class="section_4"></view>
          <view class="flex-row justify-between items-center section_3 pos_10">
            <view class="flex-row items-center space-x-8">
              <image
                class="image_15"
                src="https://图片资源地址/demo-img/2023/15/d431e7cde3959e84a0124e1ef192c23a.png"
              />
              <image
                class="image_16"
                src="https://图片资源地址/demo-img/2023/15/510830687ac76c334dc374397cd5c63a.png"
              />
            </view>
            <view class="flex-row group_8 space-x-4">
              <image
                class="image_17"
                src="https://图片资源地址/demo-img/2023/15/086ec96186b3ee15a077a3b79bc6184d.png"
              />
              <image
                class="image_18"
                src="https://图片资源地址/demo-img/2023/15/e10230aeef10d7a18a60f1e43edb637f.png"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col section_5 space-y-22">
      <view class="flex-row justify-between items-center">
        <view class="flex-col items-start space-y-8">
          <image
            class="image_19"
            src="https://图片资源地址/demo-img/2023/15/a2cbee00530b76d5ed9c0af8f89fd18a.png"
          />
          <image
            class="image_21"
            src="https://图片资源地址/demo-img/2023/15/290ce1372016b2197bc94cc8f8d8db8e.png"
          />
        </view>
        <image class="image_20" src="https://图片资源地址/demo-img/2023/15/4fbbe980dd88a464d3b0e699afc2ae24.png" />
      </view>
      <view class="flex-row justify-between items-center group_9">
        <view class="flex-col justify-start items-center image-wrapper_2">
          <image
            class="image_22"
            src="https://图片资源地址/demo-img/2023/15/3abfbe5c43f3fdce8accb120c9a9ee04.png"
          />
        </view>
        <view class="section_6"></view>
        <view class="flex-col justify-start items-center image-wrapper_2 view">
          <image
            class="image_23"
            src="https://图片资源地址/demo-img/2023/15/2eff4e9be0f215b5551b4c4808ee5b43.png"
          />
        </view>
      </view>
    </view>
    <view class="flex-col group_10">
      <view class="flex-row relative equal-division space-x-30">
        <view class="flex-col items-center equal-division-item space-y-6">
          <image
            class="image_24"
            src="https://图片资源地址/demo-img/2023/15/71c28b08308c8eac8da67b2f5feb2e93.png"
          />
          <image
            class="image_26"
            src="https://图片资源地址/demo-img/2023/15/cc683113e834a34b8029df3e01f7518e.png"
          />
        </view>
        <view class="flex-col items-center equal-division-item space-y-6">
          <image
            class="image_24"
            src="https://图片资源地址/demo-img/2023/15/194a8669fbbd478f55b037e3594d41b6.png"
          />
          <image
            class="image_27"
            src="https://图片资源地址/demo-img/2023/15/3cec2bcac3594869c9356824b86d6ac2.png"
          />
        </view>
        <view class="flex-col items-center equal-division-item space-y-6">
          <image
            class="image_25"
            src="https://图片资源地址/demo-img/2023/15/8a2aadfdd9c24aa2d41c941fd96cd6c5.png"
          />
          <image
            class="image_27"
            src="https://图片资源地址/demo-img/2023/15/043e970bda8c78a907870676d39eb5b2.png"
          />
        </view>
        <view class="flex-col items-center equal-division-item space-y-6">
          <image
            class="image_24"
            src="https://图片资源地址/demo-img/2023/15/12698ab05f0204af2579cbd8d1e0f740.png"
          />
          <image
            class="image_27"
            src="https://图片资源地址/demo-img/2023/15/41ff14fd16b5493328bd768cbf53ae6a.png"
          />
        </view>
      </view>
      <view class="section_7"></view>
      <view class="flex-col">
        <view class="flex-col">
          <view class="flex-row justify-between items-center section_8">
            <image
              class="image_23"
              src="https://图片资源地址/demo-img/2023/15/8fb2424cc88705babc9c225944d1a160.png"
            />
            <image
              class="image_18"
              src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
            />
          </view>
          <view class="flex-row justify-between items-center section_8">
            <image
              class="image_23"
              src="https://图片资源地址/demo-img/2023/15/820be651b28f9052903a0412b9373202.png"
            />
            <image
              class="image_18"
              src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
            />
          </view>
          <view class="flex-col">
            <view class="flex-row justify-between items-center section_8">
              <image
                class="image_23"
                src="https://图片资源地址/demo-img/2023/15/f1c4f9542f708cac5a63d0b8dbbba022.png"
              />
              <image
                class="image_18"
                src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
              />
            </view>
            <image
              class="image_28"
              src="https://图片资源地址/63eecd7c5a7e3f0310779c98/63f6bc53b98f5d001156f4a5/6a98c1859f6a9ea458ae21c75919531e.png"
            />
          </view>
        </view>
        <view class="flex-row justify-between items-center section_8">
          <image
            class="image_29"
            src="https://图片资源地址/demo-img/2023/15/145aa3b077220a083f2d0e1a284d5c7f.png"
          />
          <image
            class="image_18"
            src="https://图片资源地址/demo-img/2023/15/a60a8fd23d1c4c9af95d5cbbe9b57672.png"
          />
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col tab-bar">
    <view class="shrink-0 section_9"></view>
    <image
      class="shrink-0 image_30"
      src="https://图片资源地址/63eecd7c5a7e3f0310779c98/63f6bc53b98f5d001156f4a5/34f9ef34ae35efa9c754bca2946ef4ac.png"
    />
  </view>
</view>

style[scss]

.page {
  background-color: #0d1021;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .group {
    overflow-y: auto;
    .section {
      padding: 1.13rem 0.94rem 0.88rem 2.25rem;
      background-color: #0d1428;
      .text {
        color: #ffffff;
        font-size: 0.88rem;
        font-family: Helvetica;
        line-height: 0.63rem;
      }
      .space-x-6 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.38rem;
        }
        .image {
          width: 1.06rem;
          height: 0.69rem;
        }
        .image_2 {
          width: 0.94rem;
          height: 0.69rem;
        }
        .image_3 {
          width: 1.5rem;
          height: 0.72rem;
        }
      }
    }
    .section_2 {
      padding: 0.63rem 0 0.81rem;
      background-image: linear-gradient(180deg, #0e1529 3.2%, #1b2131cc 118.6%);
      .group_2 {
        padding: 0.25rem 1.13rem;
        .image_6 {
          width: 4.13rem;
          height: 1.06rem;
        }
        .group_3 {
          width: 4.13rem;
          .image_4 {
            box-shadow: 0px 0.063rem 0.25rem #1271bd inset;
            width: 3.69rem;
            height: 1.38rem;
          }
          .image_5 {
            width: 1.5rem;
            height: 1.5rem;
          }
          .pos_2 {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
        .pos {
          position: absolute;
          right: 1.13rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .group_4 {
        height: 8.31rem;
        .group_5 {
          height: 7.34rem;
          .image_7 {
            margin-left: 0.94rem;
            border-radius: 50%;
            width: 4.13rem;
            height: 4.13rem;
          }
          .group_6 {
            margin-top: -0.63rem;
            padding-top: 0.63rem;
            .image-wrapper {
              padding: 0.13rem 0 2.25rem;
              background-image: url('https://demo.2xiaobai.com/demo-img/2023/15/093cc32c1f576387ae3da195269d5d5a.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              .image_14 {
                margin-right: 2.06rem;
                width: 0.38rem;
                height: 0.81rem;
              }
            }
            .image_13 {
              width: 0.81rem;
              height: 1.63rem;
            }
            .pos_9 {
              position: absolute;
              right: 2.56rem;
              top: 0;
            }
          }
        }
        .image_8 {
          width: 8.63rem;
          height: 1.13rem;
        }
        .pos_3 {
          position: absolute;
          left: 5.88rem;
          top: 0.72rem;
        }
        .image_9 {
          width: 0.5rem;
          height: 1rem;
        }
        .pos_4 {
          position: absolute;
          right: 1.5rem;
          top: 1.59rem;
        }
        .image_10 {
          width: 3.38rem;
          height: 0.69rem;
        }
        .pos_5 {
          position: absolute;
          left: 5.84rem;
          top: 2.69rem;
        }
        .pos_6 {
          position: absolute;
          right: 9.84rem;
          top: 2.69rem;
        }
        .image_11 {
          width: 0.44rem;
          height: 0.44rem;
        }
        .pos_7 {
          position: absolute;
          right: 2.31rem;
          top: 2.75rem;
        }
        .image_12 {
          width: 0.5rem;
          height: 0.31rem;
        }
        .pos_8 {
          position: absolute;
          right: 3.47rem;
          top: 3.22rem;
        }
        .group_7 {
          margin-top: -1.63rem;
          padding: 2.19rem 0.63rem 0;
          .section_4 {
            background-color: #10131c;
            width: 0.94rem;
            height: 0.31rem;
          }
          .section_3 {
            padding: 0.63rem 0.88rem;
            background-image: url('https://demo.2xiaobai.com/demo-img/2023/15/49c3c48d03df9107fe7b4dcf6c26117a.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .space-x-8 {
              & > view:not(:first-child),
              & > text:not(:first-child),
              & > image:not(:first-child) {
                margin-left: 0.5rem;
              }
              .image_15 {
                width: 1.16rem;
                height: 1.28rem;
              }
              .image_16 {
                width: 6.75rem;
                height: 0.75rem;
              }
            }
            .group_8 {
              margin-right: 0.25rem;
              .image_17 {
                width: 2.81rem;
                height: 0.75rem;
              }
            }
            .space-x-4 {
              & > view:not(:first-child),
              & > text:not(:first-child),
              & > image:not(:first-child) {
                margin-left: 0.25rem;
              }
            }
          }
          .pos_10 {
            position: absolute;
            left: 0.94rem;
            right: 0.94rem;
            top: 0;
          }
        }
      }
    }
    .space-y-25 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 1.56rem;
      }
    }
    .section_5 {
      margin: 0 0.63rem;
      padding: 1.38rem 0.69rem 1.38rem 1.13rem;
      background-color: #1b2131;
      .space-y-8 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.5rem;
        }
        .image_19 {
          width: 5.94rem;
          height: 0.94rem;
        }
        .image_21 {
          width: 4rem;
          height: 0.75rem;
        }
      }
      .image_20 {
        width: 5.06rem;
        height: 1.75rem;
      }
      .group_9 {
        padding: 0 1.88rem;
        .image-wrapper_2 {
          width: 5.13rem;
          .image_22 {
            width: 5.13rem;
            height: 0.81rem;
          }
        }
        .section_6 {
          background-color: #9196a1;
          width: 0.063rem;
          height: 0.63rem;
        }
        .view {
          margin-right: 0.5rem;
        }
      }
    }
    .space-y-22 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 1.38rem;
      }
    }
    .group_10 {
      padding: 0.75rem 0.63rem 0;
      .equal-division {
        padding: 0.88rem 0 1rem;
        background-color: #1b2131;
        .equal-division-item {
          padding: 0.25rem 0;
          width: 5.56rem;
          .image_24 {
            border-radius: 50%;
            width: 1.88rem;
            height: 1.88rem;
          }
          .image_26 {
            width: 1.38rem;
            height: 0.69rem;
          }
          .image_27 {
            width: 1.44rem;
            height: 0.69rem;
          }
          .image_25 {
            width: 1.88rem;
            height: 1.88rem;
          }
        }
        .space-y-6 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 0.38rem;
          }
        }
      }
      .space-x-30 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 1.88rem;
        }
      }
      .section_7 {
        margin-top: 0.75rem;
        background-color: #1d2033;
        border-radius: 0.5rem 0.5rem 0px 0px;
        height: 0.63rem;
      }
      .section_8 {
        padding: 1.13rem 1.25rem;
        background-color: #1b2131;
        .image_29 {
          width: 1.69rem;
          height: 0.81rem;
        }
      }
      .image_28 {
        width: 22.19rem;
        height: 3rem;
      }
    }
    .image_23 {
      width: 3.44rem;
      height: 0.81rem;
    }
    .image_18 {
      width: 0.69rem;
      height: 0.69rem;
    }
  }
  .tab-bar {
    height: 3.38rem;
    .section_9 {
      margin: 0 0.63rem;
      background-color: #1b2131;
      border-radius: 0px 0px 0.5rem 0.5rem;
      height: 0.63rem;
    }
    .image_30 {
      margin-top: -0.31rem;
      width: 23.44rem;
      height: 3.06rem;
    }
  }
}

全局样式

添加到项目App.vue中

/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
uniapp用户页面模板,个人中心页面 含夜间模式模板插图

截图

uniapp用户页面模板,个人中心页面 含夜间模式模板插图1uniapp用户页面模板,个人中心页面 含夜间模式模板插图2
© 版权声明
THE END
写文章不易,请作者喝瓶冰红茶吧!
点赞12
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称代码图片

    暂无评论内容