Naive UI使用案例 vue3 ts 个人中心页面（1）

今天的文章是关于nviewui的使用，结合案例。

但是我的是平板端的，nviewui没法兼容vw啊。所以我们不用组件，手写一个。大部分都是手写的，没办法，要兼容。

用的是flex来让他们的位置都处于一个比较合适的地方，直接上代码。

我的图片是上传到七牛云的，就不方便展示了~

css有变量，是在全局变量里定义了，要自己修改。

效果：

html

    <div class="header">

      <div class="info">

        <div class="avatar"></div>

        <div class="infoname">

          <div class="name">Ethan.</div>

          <div class="number">18757273610</div>

        </div>

      </div>

      <div class="edit">

        <img

          src="http://123.png"

          class="editimg"

        />

      </div>

css

.avatar {
  position: relative;
  left: 0.57321vw;
  top: 0vw;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: v-bind('theme.background');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  border: 0.2vw solid @text-color-2;
}

.header {
  display: flex;
  justify-content: space-between;
  padding-top: 3vw;
  padding-left: 3vw;
}

.info {
  display: flex;
}
.infoname > div {
  margin-left: 5vw;
  margin-top: -1%;
}
.edit {
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  background-color: @text-color-4;
  // 图片水平居中
  text-align: center;
  box-sizing: border-box;
  margin-right: 3vw;
}

.editimg {
  box-sizing: border-box;
  margin-top: 18%;
}

.contant {
  background-image: linear-gradient(@text-color, white, white, white);
  width: 100%;
  height: 100%;
}

.name {
  color: @text-color-7;
  font-family: @font-family-2;
  font-size: 2vw;
  font-weight: 400;
}

.number {
  color: @text-color-3;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: 400;
}

js

const theme = {
  background: 'url(123.png) no-repeat'
};

然后我们来写这个功能

这个功能比较普通。

html

    <div class="money">
      <div>
        <div class="number moneynumber">银行卡消费</div>
        <div class="name">￥2686</div>
      </div>
      <div>
        <div class="number moneynumber">可用余额</div>
        <div class="name">￥0.00</div>
      </div>
      <div>
        <div class="number moneynumber">累计服务</div>
        <div class="name">￥1196.33</div>
      </div>
    </div>

css

.money {
  display: flex;
}

.name {
  color: @text-color-7;
  font-family: @font-family-2;
  font-size: 2vw;
  font-weight: 400;
}

.number {
  color: @text-color-3;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: 400;
}

.moneynumber {
  color: @text-color-5;
}

 然后来写这个功能。

 我先写一个对话框吧

发现css这个很常用，封装了全局css

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

 html

    <div class="use">
      <div class="div between">
        <div class="skinadress">
          <div class="skin">皮肤管理</div>
          <div class="adress">上研美丽+(万和城店)</div>
        </div>
        <div class="member">
          <div class="img">
            <img
              src="123.png"
            />
          </div>
          <div class="divs">普通会员</div>
        </div>
      </div>
    </div>

css

.div {
  width: 90%;
  height: 10vw;
  border: 0.2vw solid @text-color-2;
  position: relative;
  margin-left: 3vw;
  border-top-right-radius: 2vw;
  border-top-left-radius: 2vw;
  background-color: @background-7;
  margin-top: 3vw;
}
.div::before {
  content: '';
  width: 0;
  height: 0;
  border: 2vw solid;
  position: absolute;
  bottom: -4vw;
  left: 50%;
  border-color: @background-7 transparent transparent;
}
.skin {
  color: @text-color-8;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: @font-weight-1;
}

.adress {
  color: @text-color-4;
  font-family: @font-family-2;
  font-size: 1.8vw;
  font-weight: @font-weight-1;
}

.member {
  color: @text-color-4;
  font-family: @font-family-3;
  font-size: 1.2vw;
  font-weight: @font-weight-1;
  background-color: @background-8;
  width: 8vw;
  height: 3vw;
  text-align: center;
  margin-top: 3vw;
  margin-right: 3vw;
  display: flex;
}

.member > .img {
  margin-top: 5%;
  margin-left: 0.5vw;
}
.member > .divs {
  margin-top: 7%;
  margin-left: 0.2vw;
}

.skinadress {
  margin-top: 2vw;
  margin-left: 3vw;
}

写完了，接下来我们写这个

也非常简单 - - 感觉在干重复的事情。

css

.module {
  display: flex;
  justify-content: space-between;
  margin-left: 5vw;
  margin-top: 5vw;
  margin-right: 7vw;
}

.modulenumber {
  color: @text-color-7;
  margin-left: -1vw;
}

 html

    <div class="module">
      <div>
        <div>
          <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E8%82%8C%E8%82%A4%E5%AF%B9%E6%AF%94.png" />
        </div>
        <div class="number modulenumber">肌肤变化</div>
      </div>
      <div>
        <div>
          <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E4%B8%93%E5%B1%9E%E5%AE%A2%E6%9C%8D.png" />
        </div>
        <div class="number modulenumber">专属客服</div>
      </div>
      <div>
        <div>
          <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E9%A1%BE%E5%AE%A2%E7%94%9F%E6%97%A5.png" />
        </div>
        <div class="number modulenumber">顾客生日</div>
      </div>
      <div>
        <div>
          <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E7%A7%AF%E5%88%86%E6%98%8E%E7%BB%86.png" />
        </div>
        <div class="number modulenumber">积分明细</div>
      </div>
    </div>

果然一直干活就会感觉累 应该干一小时摸鱼一会儿才效率最快。唉，可是正在赶进度呢，周五的时候做完吧。

下周新的ui要来了。

- - 先写个大概的静态页面，后面会增加功能的，还有提取数据。这篇文章讲的就是静态页面。之后再开个新的好了。

感觉ui切割的不行，不太会切，一会去学习一下好了。

发现nviewUI官网关于这个组件介绍，不是很正经。（吐槽）