123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- <template>
-
- <view v-show="!isSortType">
- <view class="explosion" :style="'margin-top:' + mbConfig*2 +'rpx;background-color:' + boxColor+';'"
- v-if="explosiveMoney.length">
- <view class="hd skeleton-rect">
-
- <view class="title" :style="'color:'+themeColor+';'">{{titleConfig}}</view>
- <view class="txt acea-row row-center-wrapper"
- :style="'background: linear-gradient(90deg, '+ bgColor[0].item +' 0%, '+ bgColor[1].item +' 100%);'">
- {{desConfig}}
- </view>
- </view>
- <view class="bd">
- <view class="item skeleton-rect" @click="goDetail(item)" v-for="(item,index) in explosiveMoney" :key="index">
- <view class="con-box">
- <view class="title line1">{{item.info[0].value}}</view>
- <view class="con line2">{{item.info[1].value}}</view>
- <view class="go">GO!<image src="/static/images/right-icon.png" mode=""></image>
-
- <slot name="bottom" :item="item"></slot>
-
-
- <slot name="bottom{{index}}"></slot>
-
- </view>
- </view>
- <image :src="item.img" mode="aspectFill"></image>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'activeParty',
- props: {
- dataConfig: {
- type: Object,
- default: () => {}
- },
- isSortType: {
- type: String | Number,
- default: 0
- }
- },
- data() {
- return {
- titleConfig: this.dataConfig.titleConfig.value,
- desConfig: this.dataConfig.desConfig.value,
- explosiveMoney: this.dataConfig.menuConfig.list,
- themeColor: this.dataConfig.themeColor.color[0].item,
- bgColor: this.dataConfig.bgColor.color,
- mbConfig: this.dataConfig.mbConfig.val,
- boxColor: this.dataConfig.boxColor.color[0].item
- };
- },
- created() {},
- methods: {
- goDetail(item) {
- let urls = item.info[2].value;
- this.$util.JumpPath(urls);
- }
- }
- }
- </script>
- <style lang="scss">
- .explosion {
- width: 710rpx;
- margin-top: 20rpx;
- margin: 20rpx auto 0 auto;
- padding: 30rpx 20rpx;
- padding: 30rpx 20rpx 6rpx 20rpx;
- background-color: #FFE5E3;
- background-size: 100% 100%;
- border-radius: 13px;
- box-sizing: border-box;
- .hd {
- display: flex;
- align-items: center;
- .title {
- font-size: 32rpx;
- font-weight: bold;
- margin-right: 12rpx;
- }
- image {
- width: 147rpx;
- height: 35rpx;
- margin-right: 20rpx;
- }
- .txt {
- padding: 0 10rpx;
- height: 36rpx;
- // background: linear-gradient(90deg, rgba(255, 168, 0, 1) 0%, rgba(255, 34, 15, 1) 100%);
- border-radius: 26rpx 0px 26rpx 0px;
- color: #fff;
- text-align: center;
- font-size: 22rpx;
- box-shadow: 3px 1px 1px 1px var(--view-minorColorT);
- padding-bottom: 2rpx;
- }
- }
- .bd {
- display: flex;
- flex-wrap: wrap;
- margin-top: 28rpx;
- .item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: relative;
- width: 325rpx;
- height: 180rpx;
- margin-bottom: 20rpx;
- margin-right: 20rpx;
- background-color: #fff;
- border-radius: 16rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- image {
- width: 140rpx;
- height: 140rpx;
- }
- .con-box {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 130rpx;
- height: 100%;
- .title {
- color: #282828;
- font-size: 28rpx;
- }
- .con {
- color: #999999;
- font-size: 20rpx;
- margin-top: 2rpx;
- }
- .go {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 10rpx;
- width: 112rpx;
- height: 36rpx;
- border-radius: 18rpx;
- color: #fff;
- font-size: 26rpx;
- font-weight: bold;
- font-style: italic;
- image {
- width: 26rpx;
- height: 26rpx;
- }
- }
- }
- &:first-child .go {
- background: linear-gradient(90deg, rgba(75, 196, 255, 1) 0%, rgba(32, 126, 255, 1) 100%);
- }
- &:nth-child(2) .go {
- background: linear-gradient(90deg, rgba(255, 144, 67, 1) 0%, rgba(255, 83, 29, 1) 100%);
- }
- &:nth-child(3) .go {
- background: linear-gradient(90deg, rgba(150, 225, 135, 1) 0%, rgba(72, 206, 44, 1) 100%);
- }
- &:nth-child(4) .go {
- background: linear-gradient(90deg, rgba(255, 197, 96, 1) 0%, rgba(255, 156, 0, 1) 100%);
- }
- &:nth-child(2n) {
- margin-right: 0;
- }
- }
- }
- }
- </style>
|