截图
源码
链接：pan.baidu.com/s/19EFk4x3U…
提取码：xirf
–来自百度网盘超级会员V4的分享
代码
yuanShen.vue
<template>
<div class="wrapper" :style="{'--width':width,'--height':height,'--onecolofonerow':onecolofonerow,'--onecol':onecol}">
<!-- 第一列-->
<div class="onecol">
<!-- 第一列的第一行-->
<div class="onecolofonerow">
<el-image
fit="cover"
:style="{'width':onecol,'height':onecolofonerow}"
:src="imageUrl"
:preview-src-list="[imageUrl]">
</el-image>
<!--第一列的第一行的第一列-->
<div class="onecolofonerowofonecol" :style="{'--onecolofonerowofonecol':onecolofonerowofonecol,
'--onecolofonerowoftwocol':onecolofonerowoftwocol,'--onecolofonerowoftwocolpaddingtop':onecolofonerowoftwocolpaddingtop}">
<el-image
style="border-radius: 50%"
fit="cover"
:style="{'width':onecolofonerowofonecolimg,'height':onecolofonerowofonecolimg,
'marginLeft':onecolofonerowofonecolimgpaddingleft}"
:src="[imageUrl]"
:preview-src-list="[imageUrl]">
</el-image>
<!-- 第一列的第一行的第二列 -->
<div class="onecolofonerowoftwocol" :style="{'--riskmargintop':riskmargintop,'--onecolofonerowoftwocolheight':onecolofonerowoftwocolheight}">
<!-- 游戏网名-->
<div class="fontweightgame">
ikun
</div>
<!-- 个性签名-->
<div class="fontsignature">
沉默是今晚的康桥
</div>
<!--冒险等级-->
<div class="risklevel" >
<div>冒险等级</div>
<!-- 空白站位-->
<div :style="{'width':blankwhite}"></div>
<!-- 等级number-->
<div>56</div>
</div>
<!-- 世界等级-->
<div class="worldlevel">
<div>世界等级</div>
<!-- 空白站位-->
<div :style="{'width':blankwhite}"></div>
<!-- 等级number-->
<div>6</div>
</div>
<!-- 生日-->
<div class="birth">
<div>生日</div>
<!-- 空白站位-->
<div :style="{'width':birthblank}"></div>
<!-- 等级number-->
<div>2月10日</div>
</div>
</div>
</div>
</div>
<!-- 第一列的第二行-->
<div class="onecoloftworow" :style="{'--iconheight':iconheight,'--iconwidth':iconwidth,'--iconfontpaddingleft':iconfontpaddingleft}">
<!-- 第一列的第二行的第一行的第一列-->
<div class="coloritem1" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangcheng
"></use>
</svg>
<div class="fontitem">商城</div>
</div>
<!-- 第一列的第二行的第一行的第二例 -->
<div class="coloritem2" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaoseguanli1"></use>
</svg>
<div class="fontitem">队伍</div>
</div>
<!-- 第一列的第二行的第一行的第三列-->
<div class="coloritem3" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiahaoyou"></use>
</svg>
<div class="fontitem">好友</div>
</div>
<!-- 第一列的第二行的第一行的第四列-->
<div class="coloritem4" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiashichengjiu"></use>
</svg>
<div class="fontitem">成就</div>
</div>
<!-- 第一列的第二行的第二行的第一列-->
<div class="coloritem5" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tushu"></use>
</svg>
<div class="fontitem">图鉴</div>
</div>
<!-- 第一列的第二行的第二行的第二列-->
<div class="coloritem6" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaoseguanli1"></use>
</svg>
<div class="fontitem">角色</div>
</div>
<!-- 第一列的第二行的第二行的第三列-->
<div class="coloritem7" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaoseguanli1"></use>
</svg>
<div class="fontitem">角色</div>
</div>
<!-- 第一列的第二行的第二行的第四列-->
<div class="coloritem8" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shubao"></use>
</svg>
<div class="fontitem">背包</div>
</div>
<!-- 第一列的第二行的第三行的第一列-->
<div class="coloritem9" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-renwu"></use>
</svg>
<div class="fontitem">任务</div>
</div>
<!-- 第一列的第二行的第三行的第二列-->
<div class="coloritem10" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ditu"></use>
</svg>
<div class="fontitem">地图</div>
</div>
<!-- 第一列的第二行的第三行的第三列-->
<div class="coloritem11" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huodong"></use>
</svg>
<div class="fontitem">活动</div>
</div>
<!-- 第一列的第二行的第三行的第四列-->
<div class="coloritem12" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaoseguanli1"></use>
</svg>
<div class="fontitem">冒险之证</div>
</div>
<!-- 第一列的第二行的第四行的第一列-->
<div class="coloritem13" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xingxing"></use>
</svg>
<div class="fontitem">原石</div>
</div>
<!-- 第一列的第二行的第四行的第二列-->
<div class="coloritem14" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xingxing"></use>
</svg>
<div class="fontitem">原石</div>
</div>
<!-- 第一列的第二行的第四行的第三列-->
<div class="coloritem15" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xingxing"></use>
</svg>
<div class="fontitem">原石</div>
</div>
<!-- 第一列的第二行的第四行的第四列-->
<div class="coloritem16" :style="{'height':itemheight,'width':itemwidth}">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xingxing"></use>
</svg>
<div class="fontitem">原石</div>
</div>
</div>
</div>
<!-- 第二列-->
<div class="twocol">
<video src="http://127.0.0.1:3000/upvideo/11.mp4" controls="controls" :style="{'height':height,'width':onecol}" >
您的浏览器不支持 video 标签。
</video>
</div>
</div>
</template>
<script>
import "@/icon/iconfont"
export default {
name: "yuanShen",
data(){
return{
/* 整个容器的列的width*/
width:'',
/* 整个容器的height*/
height:'',
/* 第一列的第一行的height*/
onecolofonerow:'',
/* 第一列的width*/
onecol:'',
imageUrl:'http://127.0.0.1:3000/image/55.jpg',
/*第一列的第一行的第一列width*/
onecolofonerowofonecol:'',
/*第一列的第一行的第一列图片的width*/
onecolofonerowofonecolimg:'',
///*第一列的第一行的第一列图片的paddingleft*/
onecolofonerowofonecolimgpaddingleft:'',
/*第一列的第一行的第二列*/
onecolofonerowoftwocol:'',
/*第一列的第一行的第二列paddingtop*/
onecolofonerowoftwocolpaddingtop:'',
// 空白站位
blankwhite:'',
//生日空白站位
birthblank:'',
/* 冒险等级的margintop*/
riskmargintop:'',
/*第一列的第一行的第二列height*/
onecolofonerowoftwocolheight:'',
// 4*4每个项目的height
itemheight:'',
// 4*4每个项目的width
itemwidth:'',
//icon图标的height
iconheight:'',
//icon图标的width
iconwidth:'',
/* icon图标下面的文字的paddingleft*/
iconfontpaddingleft:'',
}
},
mounted() {
this.gethomeheight()
this.gethomewidth()
window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
window.addEventListener('resize', this.gethomeheight);
},
methods:{
gethomewidth(){
// 获取窗口宽度
var windowwidth = window.innerWidth
this.width = parseInt(windowwidth/3*2)+'px'
this.onecol = parseInt(windowwidth/3*2/2)+'px'
/*第一列的第一行的第一列width*/
this.onecolofonerowofonecol = parseInt(windowwidth/3/3)+'px'
/*第一列的第一行的第一列图片的width*/
this.onecolofonerowofonecolimg = parseInt(windowwidth/3/3/3*2)+'px'
/*第一列的第一行的第一列图片的paddingleft*/
this.onecolofonerowofonecolimgpaddingleft = parseInt(windowwidth/3/3/3*2/4)+'px'
/*第一列的第一行的第二列width*/
this.onecolofonerowoftwocol = parseInt(windowwidth/3/3*2)+'px'
/*第一列的第一行的第二列paddingtop*/
this.onecolofonerowoftwocolpaddingtop = parseInt(windowwidth/3/3/3*2/2)+'px'
// 空白站位
this.blankwhite = parseInt(windowwidth/3/3*2/3*2)+'px'
//生日空白站位
this.birthblank = parseInt(windowwidth/3/3*2/8*5)+'px'
// 4*4的每个项目的width
this.itemwidth = parseInt(windowwidth/15+windowwidth/97)+'px'
// icon图标的width
this.iconwidth = parseInt(windowwidth/15+windowwidth/130)+'px'
/* icon图标下面的文字的paddingleft*/
this.iconfontpaddingleft = parseInt(windowwidth/3/3/3*2/3)+'px'
},
// 获得窗口height度
gethomeheight(){
var windowheight = window.innerHeight
this.height = parseInt(windowheight-60)+'px'
this.onecolofonerow = parseInt(windowheight/3)+'px'
/* 冒险等级的margintop*/
this.riskmargintop = parseInt(windowheight/3/7)+'px'
/*第一列的第一行的第二列height*/
this.onecolofonerowoftwocolheight = parseInt(windowheight/4)+'px'
// 4*4的height
this.itemheight = parseInt(windowheight/8*9/8)+'px'
// icon图标的height
this.iconheight = parseInt(windowheight/8*9/12)+'px'
}
},
}
</script>
<style scoped>
:root{
/* 整个容器的列的width*/
--width:'';
/* 整个容器的height*/
--height:'';
/* 第一列的width*/
--onecol:'';
/* 第二列的width*/
--twocol:'';
/* 第一列的第一行的height*/
--onecolofonerow:'';
/*第一列的第一行的第一列width*/
--onecolofonerowofonecol:'';
/*第一列的第一行的第一列图片的width*/
--onecolofonerowofonecolimg:'';
/*第一列的第一行的第一列图片的paddingleft*/
--onecolofonerowofonecolimgpaddingleft:'';
/*第一列的第一行的第二列*/
--onecolofonerowoftwocol:'';
/*第一列的第一行的第二列paddingtop*/
--onecolofonerowoftwocolpaddingtop:'';
/* 冒险等级的margintop*/
--riskmargintop:'';
/*第一列的第一行的第二列height*/
--onecolofonerowoftwocolheight:'';
/* icon图标的width*/
--iconwidth:'';
/* icon图片的height*/
--iconheight:'';
/* icon图标下面的文字的paddingleft*/
--iconfontpaddingleft:'';
}
.wrapper{
display: flex;
width: var(--width);
height: var(--height);
}
/*第一列*/
.onecol{
display: flex;
flex-direction: column;
}
/*第一列的第一行*/
.onecolofonerow{
position: relative;
width: var(--onecol);
height: var(--onecolofonerow);
background-image: url("http://127.0.0.1:3000/image/55.jpg");
}
/*第二列*/
.twocol{
width: var(--onecol);
background-color: black;
}
/*第一列的第一行的第一列*/
.onecolofonerowofonecol{
position: absolute;
width: var(--onecolofonerowofonecol);
left: 0;
top: 0;
}
/*第一列的第一行的第二列*/
.onecolofonerowoftwocol{
display: flex;
flex-direction: column;
position: absolute;
left: var(--onecolofonerowofonecol);
top: var(--onecolofonerowoftwocolpaddingtop);
width: var(--onecolofonerowoftwocol);
height: var(--onecolofonerowoftwocolheight);
}
/*游戏网名*/
.fontweightgame{
flex-grow: 1;
font-weight: bold;
font-size: 30px;
}
/*个性签名*/
.fontsignature{
flex-grow: 1;
color: gray;
}
/*冒险等级*/
.risklevel{
flex-grow: 1;
font-size: 20px;
display: flex;
}
/*世界等级*/
.worldlevel{
flex-grow: 1;
font-size: 20px;
display: flex;
}
/*生日*/
.birth{
flex-grow: 1;
font-size: 20px;
display: flex;
}
/*第一列的第二行*/
.onecoloftworow{
justify-content: center;
display: flex;
flex-wrap: wrap;
gap: 5px;
width: var(--onecol);
}
/*4*4项目的background-color*/
.coloritem1{
display: flex;
justify-content: center;
flex-direction: column;
}
/*icon下面的文字大小设置*/
.fontitem{
padding-left: var(--iconfontpaddingleft);
font-weight: bold;
}
.coloritem2{
}
.coloritem3{
}
.coloritem4{
}
.coloritem5{
}
.coloritem6{
}
.coloritem7{
}
.coloritem8{
}
.coloritem9{
}
.coloritem10{
}
.coloritem11{
}
.coloritem12{
}
.coloritem13{
}
.coloritem14{
}
.coloritem15{
}
.coloritem16{
}
/*icon图片大小的相关设置*/
.icon {
height: var(--iconheight);
width: var(--iconwidth);
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
transition: transform 0.3s ease;
}
.icon:hover{
transform: scale(0.9);
}
</style>
