123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <template>
- <view class="content-box">
- <view class="theme-list">
- <image class="theme-img" :src="$getImgPath(themeVo.themeBanner)" mode="scaleToFill"></image>
- <view class="theme-item" v-for="item in themeModuleVoList" :key="item.themeModuleId"
- @click.stop="openKongKim(item)">
- <image class="theme-icon" :src="$getImgPath(item.moduleImage)" mode="aspectFit"></image>
- <text class="theme-name zw-one-row">{{item.moduleName}}</text>
- <text class="theme-look iconfont_yige"></text>
- </view>
- </view>
- </view>
- </template>
- <script>
- import Mixin from "./Mixin.js"
- export default {
- mixins: [Mixin],
- data() {
- return {
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .content-box {
- padding: 0 25rpx 25rpx;
- min-height: 100vh;
- background-color: rgba(248, 248, 248, 1);
- }
- .theme-img {
- width: 100%;
- height: 373rpx;
- }
- .theme-list {
- width: 100%;
- // padding-top: 30rpx;
- background-color: #fff;
- border-radius: 0 0 20rpx 20rpx;
- .theme-item {
- width: 100%;
- height: 160rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 30rpx;
- border-bottom: 1rpx solid #F7F7F7;
- &:last-child {
- border-bottom: none;
- }
- .theme-icon {
- width: 88rpx;
- height: 88rpx;
- flex-shrink: 0;
- }
- .theme-name {
- flex: 1;
- font-size: 30rpx;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #333333;
- padding: 0 33rpx;
- }
- .theme-look {
- flex-shrink: 0;
- // width: 100rpx;
- font-size: 30rpx;
- font-weight: 400;
- color: #333333;
- }
- }
- }
- </style>
|