CSS3围绕中心点布局
2021-08-11 本文已影响0人
小鱼儿_逆流而上
小鱼儿心语：不要那么敏感，也不要那么心软，太敏感和太心软的人，肯定过得不快乐，别人随便的一句话，你都要胡思乱想一整天。敏感和心软都因为太在乎别人，活不出自我，太过考虑别人的感受，注定自己不好受。
这两天做可视化页面，有这样儿一个需求，其实很简单，先上图：
围绕中心点布局.png
需要注意：复制下来可能会有接口请求报错，请根据实际情况而定
页面展示代码：
<div class="information display_flex">
<p class="title">
<img src="@/assets/img/icon3.png" />
<span>产量分布</span>
</p>
<div class="content">
// pointImg是中心的背景图片
<div class="center-point" :style="pointImg">
<span class="count">总产量</span>
<div class="countNum">
<span>{{ centerName }}</span>
<span>吨</span>
</div>
</div>
<div class="surround-box">
<ul>
<li class="circle" :style="item.circleImg" v-for="(item, index) in circles" :key="index">
<span :style="item.font">{{ item.name }}</span>
</li>
</ul>
</div>
</div>
</div>
js代码：
export default {
data() {
return {
circles: [
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(30deg) translateY(180px)',
},
// 图片旋转--文字也会跟着旋转，，所以需要把文字向相反的方向转回来
font: {
transform: 'rotate(-30deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(60deg) translateY(180px)',
},
font: {
transform: 'rotate(-60deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(90deg) translateY(180px)',
},
font: {
transform: 'rotate(-90deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(120deg) translateY(180px)',
},
font: {
transform: 'rotate(-120deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(150deg) translateY(180px)',
},
font: {
transform: 'rotate(-150deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(180deg) translateY(180px)',
},
font: {
transform: 'rotate(-180deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(210deg) translateY(180px)',
},
font: {
transform: 'rotate(-210deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(240deg) translateY(180px)',
},
font: {
transform: 'rotate(-240deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(270deg) translateY(180px)',
},
font: {
transform: 'rotate(-270deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(300deg) translateY(180px)',
},
font: {
transform: 'rotate(-300deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(330deg) translateY(180px)',
},
font: {
transform: 'rotate(-330deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(360deg) translateY(180px)',
},
font: {
transform: 'rotate(-360deg)',
display: 'block',
},
},
],
centerName: '', //中心总产量数据
pointImg: { //中心展示的背景图片
backgroundImage: 'url(' + require('@/assets/img/yieldcenter.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
},
}
}，
mounted：{
// 产量分布----请求接口获取相关产量数据，根据实际情况而定
this.$http.post('/product/cs/mine', this.query).then((res) => {
res = res.data
this.centerName = res.data.csMine[res.data.csMine.length - 1].split(':')[1].split('吨')[0]
res.data.csMine.forEach((e, index) => {
if (this.circles[index]) {
this.circles[index].name = res.data.csMine[index]
}
})
this.circles.forEach((item) => {
item.name = item.name.replace('有限公司', '')
})
})
}
}
css代码：
<style lang="scss" scoped>
//旋转
.surround-box,
.center-point {
position: absolute;
top: 23%;
left: 6%;
width: 5.8rem;
height: 3.5rem;
margin-left: -10px;
margin-top: -10px;
border-radius: 50%;
clear: both;
.count {
position: absolute;
top: 1.5rem;
left: 2.57rem;
font-size: 0.2rem;
color: #fff;
}
.countNum {
position: absolute;
top: 1.75rem;
left: 2.41rem;
width: 0.9rem;
height: 0.4rem;
color: #fff;
text-align: center;
span:nth-child(1) {
font-size: 0.32rem;
}
span:nth-child(2) {
font-size: 0.18rem;
}
}
}
.circle {
/* 这里一定要绝对定位，这样位置才能铺开来 */
position: absolute;
top: 1.4rem;
left: 2.55rem;
width: 0.75rem;
height: 0.7rem;
line-height: 0.2rem;
border-radius: 50%;
text-align: center;
color: #fff;
padding: 0.15rem 0.1rem;
cursor: pointer;
}
</style>
