Zlpt_Portal/src/views/user/baseInfo/index.vue

136 lines
2.8 KiB
Vue

<script setup lang="ts">
</script>
<template>
<!-- 基础信息 -->
<div class="base-info">
<div class="title-info">
<span>132255xxxxxxxx</span>
<a class="edit-a">修改</a>
<span>免费用户/标准用户 xxxx-xxx</span>
<a class="logoff-a">账号注销</a>
</div>
<div class="myqiye">
<span>我的企业:</span>
<a>申请企业认证</a>
/
<a>xxxxxx公司</a>
</div>
<!-- 订单交易信息 -->
<div class="goods-box">
<span class="goods-pay">订单交易</span>
<ul class="goods-count">
<li>
<!-- <svg-icon icon-class="goods-submit" class="svgicon" /> -->
<span>已提交</span>
<span>0</span>
</li>
<li>
<!-- <svg-icon icon-class="goods-ing" class="svgicon" /> -->
<span>进行中</span>
<span>0</span>
</li>
<li>
<!-- <svg-icon icon-class="goods-pass" class="svgicon" /> -->
<span>已完成</span>
<span>0</span>
</li>
<li>
<!-- <svg-icon icon-class="goods-icon" class="svgicon" /> -->
<span>全部</span>
<span>0</span>
</li>
</ul>
</div>
</div>
</template>
<style lang="scss">
.base-info {
width: 100%;
height: 100%;
}
.title-info,
.myqiye {
padding: 0 20px;
display: flex;
height: 56px;
align-items: center;
}
.edit-a {
margin: 0 50px 0 10px;
color: #0262db;
}
.logoff-a {
flex: 1;
text-align: right;
}
.myqiye {
// width: calc(100% - 15px);
padding: 0;
margin: 20px 0 0 20px;
border-bottom: 1px solid #000;
span {
margin-right: 5px;
}
a {
color: #0262db;
}
}
.goods-box {
padding: 20px;
.goods-pay {
display: inline-block;
padding: 5px;
height: 37px;
line-height: 37px;
color: #000;
border-bottom: 1px solid #d90d1a;
}
.goods-count {
// width: 100%;
height: 140px;
background-color: #f5f5f5;
padding: 0;
margin: 0;
margin-top: 15px;
list-style: none;
display: flex;
justify-content: space-around;
.svgicon {
width: 35px;
height: 35px;
}
li {
width: 140px;
height: 140px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
margin: 5px;
}
}
}
}
</style>