4.13 个人名片包。 前端页面

assets/css/otherpage/user/userCard.scss

@@ -0,0 +1,194 @@
+@import "../../scssCommon.scss";
+
+.userCard {
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  background-color: #fff;
+  margin: 0;
+
+  position: relative;
+
+  .userList {
+    padding: 0 pxtovw(10);
+
+    .cell {
+      height: pxtovw(80);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .userImg {
+        flex-shrink: 0;
+        width: pxtovw(50);
+        height: pxtovw(50);
+        font-size: 0;
+        img {
+          width: pxtovw(50);
+          height: pxtovw(50);
+          border-radius: 50%;
+        }
+      }
+
+      &:last-child {
+        .right {
+          border-bottom: 0;
+        }
+      }
+
+      .right {
+        margin-left: pxtovw(10);
+        width: pxtovw(295);
+        height: pxtovw(80);
+        border-bottom: 1px solid #f4f4f4;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .userInfo {
+          width: pxtovw(230);
+          .name {
+            height: pxtovw(22);
+            font-size: pxtovw(16);
+            font-weight: 500;
+            color: rgba(34, 34, 34, 1);
+            line-height: pxtovw(22);
+          }
+          .tips {
+            margin-top: pxtovw(px);
+            height: pxtovw(17);
+            font-size: pxtovw(12);
+            font-weight: 400;
+            color: rgba(153, 153, 153, 1);
+            line-height: pxtovw(17);
+          }
+        }
+        .addTime {
+          margin-top: 15px;
+          align-self: flex-start;
+
+          p {
+            height: pxtovw(17);
+            font-size: pxtovw(12);
+            font-weight: 400;
+            color: rgba(153, 153, 153, 1);
+            line-height: pxtovw(17);
+          }
+        }
+      }
+    }
+  }
+
+  .popUp {
+    position: absolute;
+    z-index: 100;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.7);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .toastBox {
+      width: pxtovw(300);
+      height: pxtovw(427);
+      border-radius: pxtovw(8);
+      background-color: #fff;
+      position: relative;
+
+      .content {
+        width: 100%;
+        height: 100%;
+        padding: pxtovw(30) pxtovw(20);
+
+        .userImg {
+          margin: 0 auto;
+          width: pxtovw(75);
+          height: pxtovw(75);
+          img {
+            width: pxtovw(75);
+            height: pxtovw(75);
+            border-radius: 50%;
+          }
+        }
+
+        .name {
+          margin-top: pxtovw(5);
+          height: pxtovw(21);
+          font-size: pxtovw(15);
+          font-weight: 600;
+          color: rgba(34, 34, 34, 1);
+          line-height: pxtovw(21);
+          text-align: center;
+        }
+
+        .userInfo {
+          margin-top: pxtovw(35);
+          width: 100%;
+          .cell {
+            width: 100%;
+            height: pxtovw(40);
+            display: flex;
+            align-self: center;
+
+            .cname {
+              width: pxtovw(50);
+              font-size: pxtovw(14);
+              font-weight: 400;
+              color: rgba(153, 153, 153, 1);
+              text-align: left;
+            }
+
+            .cvalue {
+              width: pxtovw(160);
+              font-size: pxtovw(14);
+              font-weight: 500;
+              color: rgba(34, 34, 34, 1);
+              text-align: left;
+            }
+            .cbutton {
+              width: pxtovw(50);
+              font-size: pxtovw(14);
+              font-weight: 400;
+              color: rgba(48, 142, 255, 1);
+              text-align: right;
+            }
+          }
+        }
+
+        .button {
+          margin-top: pxtovw(27);
+          height: pxtovw(43);
+          background: rgba(48, 142, 255, 1);
+          box-shadow: 0 pxtovw(4) pxtovw(9) 0 rgba(0, 147, 253, 0.29);
+          border-radius: pxtovw(24);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          p {
+            font-size: pxtovw(15);
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: pxtovw(21);
+          }
+        }
+      }
+
+      .closeIcon {
+        position: absolute;
+        bottom: pxtovw(-50);
+        left: 50%;
+        transform: translateX(-50%);
+        width: pxtovw(30);
+        height: pxtovw(30);
+        background: url('~@/assets/img/other/closeIcon@2x.png') no-repeat;
+        background-size: cover;
+      }
+    }
+  }
+
+}

pages/otherpage/user/card.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="userCard">
+    <div class="userList">
+      <div class="cell" v-for="(item, index) in userList" :key="'userList' + index" @click="openDialog(item)">
+        <div class="userImg">
+          <img src="" alt="">
+        </div>
+        <div class="right">
+          <div class="userInfo">
+            <p class="name">前端开发大王</p>
+            <p class="tips">程序客栈 前端工程师</p>
+          </div>
+          <div class="addTime">
+            <p>4天钱</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="popUp" v-if="showToast">
+      <div class="toastBox">
+        <div class="content">
+          <div class="userImg">
+            <img src="" alt="">
+          </div>
+          <p class="name">{{'jmimi'}}</p>
+          <div class="userInfo">
+            <div class="cell" v-for="(item, index) in userData" :key="'uT'+index">
+              <p class="cname">{{item.name}}</p>
+              <p class="cvalue">{{item.value}}</p>
+              <p class="cbutton" @click="copyItem(item)">复制</p>
+            </div>
+          </div>
+          <div class="button">
+            <p>个人主页</p>
+          </div>
+        </div>
+        <div class="closeIcon" @click="showToast=false"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  /**
+   * 名片夹
+   */
+
+  export default {
+    name: 'UserCard',
+    data() {
+      return {
+        userList:[
+          {},{},{},{},{}
+        ],
+        userData: [
+          {name: '邮箱', value: 'work2018@qq.com'},
+          {name: '电话', value: '14765409653'},
+          {name: '微信', value: 'jimli334'},
+          {name: 'QQ', value: '356898148'},
+        ],
+        showToast: false
+      }
+    },
+    async created() {
+
+    },
+    async mounted() {
+      await this.needLogin()
+      this.getTypeList()
+    },
+    methods: {
+      /** 获取展示状态 */
+      getTypeList() {
+
+      },
+
+      openDialog() {
+        this.showToast = true
+        this.userData = [...this.userData]
+      },
+
+      /** 复制到剪切板 */
+      copyItem(item) {
+        const { value } = item
+        const input = document.createElement('input')
+        input.readOnly = 'readonly'
+        input.value = value
+        document.body.appendChild(input)
+        input.select()
+        input.setSelectionRange(0, input.value.length)
+        document.execCommand('Copy')
+        document.body.removeChild(input)
+      }
+    },
+
+  }
+</script>
+<style lang="scss" scoped>
+  @import '../../../assets/css/otherpage/user/userCard.scss';
+</style>