Wance/rd_mes_uniapp_deprecated
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

init project

Browse Source
This commit is contained in:
tao
2025-11-17 10:01:33 +08:00
commit 77c123408d
1018 changed files with 136951 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
components/text-block/text-block.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<view class="text_block">
<template v-for="(item,index) in content">
<view v-if="item.kind == 1" :key="index"
:style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background[1]+')'}"
:class="[(index+1)%3==0 ? '':'marginRight','kind','kind_one','breathe-blue']">
<view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colorvalue}">
{{item.content[0].value}}
</view>
<view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colortext}">
{{item.content[1].text}}
</view>
</view>
<view v-else-if="item.kind == 2" :key="index"
:class="[(index+1)%3==0 ? '':'marginRight','kind','kind_two','breathe-blue']"
:style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background+')' ,marginRight:(index+1)%3==0?'0rpx':'40rpx'}">
<view v-for="(content,i) in item.content" :key="i" class="two_1">
<text :style="{fontSize:content.size,color:content.colortext}">{{content.text}}:</text>
<text :style="{fontSize:content.size,color:content.colorvalue}">{{content.value}}</text>
</view>
</view>
<view v-else-if="item.kind == 3" :key="index" class="kind kind_three breathe-blue"
:style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background+')'}">
<view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colorvalue}">
{{item.content[0].value}}
</view>
<view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colortext}">
{{item.content[1].text}}
</view>
<view class="three_3 view_100">
<view v-for="(j,i) in 2" :key="i">
<text
:style="{fontSize:item.content[i+2].size,color:item.content[i+2].colortext}">{{item.content[i+2].text}}:</text>
<text
:style="{fontSize:item.content[i+2].size,color:item.content[i+2].colorvalue}">{{item.content[i+2].value}}</text>
</view>
</view>
</view>
<view v-else-if="item.kind == 4" :key="index"
:class="[(index+1)%4==0 ? '':'marginRight','kind','kind_four','breathe-blue']"
:style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background[1]+')',marginRight:(index+1)%4==0?'0rpx':'40px'}">
<view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colortext}">
{{item.content[0].text}}
</view>
<view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colorvalue}">
{{item.content[1].value}}
</view>
<!-- <view class="four_3" :style="{fontSize:item.content[2].size,color:item.content[2].colorvalue}">
<text :style="{fontSize:item.content[3].size,color:item.content[3].colorvalue}">{{item.content[2].text}}</text>
<li v-if="item.content[3].text == 'up'" class="iconfont icon-up icon" :style="{color:item.content[3].colortext}"></li>
<li v-else class="iconfont icon-down icon" :style="{color:item.content[3].colortext}"></li>
<text :style="{fontSize:item.content[3].size,color:item.content[3].colorvalue}">{{item.content[3].value}}</text>
</view> -->
</view>
<view v-else-if="item.kind == 5" :key="index"
:class="[(index+1)%3==0 ? '':'marginRight','kind','kind_five','breathe-red']"
:style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background[1]+')',marginRight:(index+1)%3==0?'0rpx':'40rpx'}">
<view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colortext}">
{{item.content[0].text}}
</view>
<view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colorvalue}">
{{item.content[1].value}}
</view>
<view class="five_3 view_100">
<view v-for="(j,i) in 2" :key="i">
<text
:style="{fontSize:item.content[j+2].size,color:item.content[j+2].colortext}">{{item.content[j+2].text}}</text>
<text
:style="{fontSize:item.content[j+2].size,color:item.content[j+2].colorvalue}">{{item.content[j+2].value}}</text>
</view>
</view>
<view class="five_4">
<text
:style="{fontSize:item.content[4].size,color:item.content[4].colortext}">{{item.content[4].text}}</text>
<text
:style="{fontSize:item.content[4].size,color:item.content[4].colorvalue}">{{item.content[4].value}}</text>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
props: {
content: {
type: Array,
default: []
},
},
data() {
return {}
},
methods: {
},
mounted() {
uni.onWindowResize((res) => {
console.log('变化后的窗口宽度=' + res.size.windowWidth)
console.log('变化后的窗口高度=' + res.size.windowHeight)
})
}
}
</script>
<style lang="scss">
.text_block {
display: flex;
width: 100%;
flex-wrap: wrap;
.marginRight {
margin-right: 36rpx !important;
}
.view_100 {
width: 100%;
}
.CPT_DYBG {
overflow: hidden;
position: relative;
}
.kind {
width: 40%;
padding: 10rpx;
margin-bottom: 40rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
border-radius: 16rpx;
margin-left: 4.5%;
box-shadow: -4px 4px 4px #ccc;
position: relative;
}
.kind_one {
border-radius: 10rpx;
}
.kind_two {
border-radius: 10rpx;
}
.kind_three {
border-radius: 16rpx;
width: 300rpx;
margin: 0 auto;
.three_3 {
display: flex;
justify-content: space-around;
}
}
.kind_four {
border-radius: 10rpx;
.four_3 {
display: flex;
li {
list-style-type: none;
}
.icon {
margin-top: -8rpx;
transform: scale(0.8);
}
}
}
.kind_five {
border-radius: 20rpx;
.five_3 {
view {
width: 100%;
}
}
}
}
// .breathe-blue {
// position:relative;
// color:#fff;
// text-align:center;
// cursor:pointer;
// box-shadow:0 1px 2px rgba(0,0,0,.3);
// overflow:hidden;
// -webkit-animation-timing-function:ease-in-out;
// -webkit-animation-name:breatheblue;
// -webkit-animation-duration:2000ms;
// -webkit-animation-iteration-count:infinite;
// -webkit-animation-direction:alternate;
// }
// @keyframes breatheblue {
// 0% {
// opacity:.8;
// box-shadow:0 1px 2px rgba(62,178,245,0.5);
// }
// 100% {
// opacity:1;
// box-shadow:0 1px 30px rgba(147,116,247,0.6);
// }
// }
// .breathe-red {
// position:relative;
// color:#fff;
// text-align:center;
// cursor:pointer;
// box-shadow:0 1px 2px rgba(0,0,0,.3);
// overflow:hidden;
// -webkit-animation-timing-function:ease-in-out;
// -webkit-animation-name:breathered;
// -webkit-animation-duration:2000ms;
// -webkit-animation-iteration-count:infinite;
// -webkit-animation-direction:alternate;
// }
// @keyframes breathered {
// 0% {
// opacity:.8;
// box-shadow:0 1px 2px rgba(247,126,137,0.5);
// }
// 100% {
// opacity:1;
// box-shadow:0 1px 30px rgba(247,149,59,0.9);
// }
// }
</style>