添加自适应

src/components/TopBar.vue

@@ -2,20 +2,20 @@
   <div class="top-bar-box">
     <div class="top-bar">
       <div class="top-box">
-<!--        <span>移动安全保卫管理平台</span>-->
+        <!--        <span>移动安全保卫管理平台</span>-->
         <van-icon name="setting-o" size="26" @click="clickOutLogin" />
       </div>
       <div class="bottom-box">
-<!--        <div>
-          <p class="user-name">{{ userName }}</p>
-          <p class="org-info">
-            <span>{{ orgName }}</span>
-            <van-icon name="arrow" size="20" />
-          </p>
-          <p class="van-multi-ellipsis&#45;&#45;l2 introduce-info ">
-            <span v-for="item in roleList" :key="item.roleId">{{ item.roleName }}</span>
-          </p>
-        </div>-->
+        <!--        <div>
+                  <p class="user-name">{{ userName }}</p>
+                  <p class="org-info">
+                    <span>{{ orgName }}</span>
+                    <van-icon name="arrow" size="20" />
+                  </p>
+                  <p class="van-multi-ellipsis&#45;&#45;l2 introduce-info ">
+                    <span v-for="item in roleList" :key="item.roleId">{{ item.roleName }}</span>
+                  </p>
+                </div>-->
       </div>
     </div>
     <div class="top-card">
@@ -42,111 +42,117 @@
       </div>
       <div class="top-card-line">
         <van-image
-          width="0.65rem"
-          height="0.6rem"
-          style="margin-left: 10px;float: left"
+          width="0.7rem"
+          height="0.7rem"
+          style="margin-left: 7px;float: left"
           :src="require('@/assets/img/my/role.png')"
         />
         <p class="van-multi-ellipsis&#45;&#45;l2 introduce-info " style="line-height: 28px;">
           <span class="top_text_content" v-for="item in roleList" :key="item.roleId">{{ item.roleName }}</span>
         </p>
       </div>
+      <div style="height: 2vw;"></div>
     </div>
-
+    <div class="card-footer"></div>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
-import { logout } from '@/api/public'
-export default {
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapGetters(['userName', 'orgName','roleList', 'orgId']),
-  },
-  methods: {
-    clickOutLogin() {
-      logout().then(res => {
-        sessionStorage.clear();
-        this.$router.replace('/login');
-        this.$toast('退出登录');
-      })
+  import { mapGetters } from 'vuex'
+  import { logout } from '@/api/public'
+  export default {
+    data() {
+      return {}
+    },
+    computed: {
+      ...mapGetters(['userName', 'orgName','roleList', 'orgId']),
     },
+    methods: {
+      clickOutLogin() {
+        logout().then(res => {
+          sessionStorage.clear();
+          this.$router.replace('/login');
+          this.$toast('退出登录');
+        })
+      },
+    }
   }
-}
 </script>
 
 <style scoped lang="scss">
-.top-bar-box{
-  position: relative;
-  height: 750px;
-}
-.top-card{
-  height: 45.333333vw;
-  background-color: #FFFFFF;
-  margin-top: -23vw;
-  margin-left: 6%;
-  margin-right: 6%;
-  border-radius: 10px;
-  .top-card-line{
-    padding-top: 2vw;
-    padding-left: 4vw;
+  .card-footer{
+    height: 3vw;
   }
-}
-.user-name{
-  padding-left: 15vw;
-  font-size: 6.333333vw;
-  line-height: 14vw;
-}
-
-.top_text_content{
-  margin-left: 2vw;
-  font-size: 3.8vw;
-  color: #797979;
-}
-.top-bar {
-  height: 550px;
-  width: 100%;
-  background: url('../assets/img/my/my_header.png') no-repeat center rgba(255,255,255,.1);
-  background-size: 100% 100%;
-  padding: 40px 40px 20px 40px;
-  text-shadow: 0 1px 3px #666;
-  box-shadow: 0 1px 10px #ffffff;
-  color: #fff;
-  > div {
-    width: 100%;
+  .top-bar-box{
+    position: relative;
+    min-height: 90vw;
+    height: auto;
+  }
+  .top-card{
+    height: auto;
+    min-height: 37vw;
+    background-color: #FFFFFF;
+    margin-top: -23vw;
+    margin-left: 6%;
+    margin-right: 6%;
+    border-radius: 10px;
+    .top-card-line{
+      padding-top: 2vw;
+      padding-left: 4vw;
+    }
+  }
+  .user-name{
+    padding-left: 15vw;
+    font-size: 6.333333vw;
+    line-height: 14vw;
   }
-}
 
-.top-box {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  > span {
-    font-size: 40px;
+  .top_text_content{
+    margin-left: 2vw;
+    font-size: 3.8vw;
+    color: #797979;
   }
-}
-.bottom-box {
-  padding-top: 30px;
-  > div {
-    .user-name {
-      font-size: 30px;
-      margin-bottom: 10px;
+  .top-bar {
+    height: 550px;
+    width: 100%;
+    background: url('../assets/img/my/my_header.png') no-repeat center rgba(255,255,255,.1);
+    background-size: 100% 100%;
+    padding: 40px 40px 20px 40px;
+    text-shadow: 0 1px 3px #666;
+    box-shadow: 0 1px 10px #ffffff;
+    color: #fff;
+    > div {
+      width: 100%;
     }
-    .org-info{
-      font-size: 28px;
-      display: flex;
-      justify-content: space-between;
+  }
+
+  .top-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    > span {
+      font-size: 40px;
     }
-    .introduce-info {
-      font-size: 24px;
-      line-height: 34px;
-      >span{
-        display: inline-block;
-        margin-right: 20px;
+  }
+  .bottom-box {
+    padding-top: 30px;
+    > div {
+      .user-name {
+        font-size: 30px;
+        margin-bottom: 10px;
+      }
+      .org-info{
+        font-size: 28px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .introduce-info {
+        font-size: 24px;
+        line-height: 34px;
+        >span{
+          display: inline-block;
+          margin-right: 20px;
+        }
       }
     }
   }
-}
 </style>