| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- <template name="dever-content">
- <view>
- <block v-for="(v, k) in item" :key="k">
-
- <view :class="[skeleton ? 'grace-skeletons-img' : 'grace-img-in']" v-if="v.type == 'pic'">
- <image :src="v.content" class="grace-art-img" mode="widthFix" @click="Dever.viewPic(pics, v.content)" style="height:auto"></image>
- </view>
-
- <view :class="[skeleton ? 'grace-skeletons' : 'grace-art-content']" v-else-if="v.type == 'html'"><rich-text type="text" :nodes="v.content"></rich-text></view>
-
- </block>
- </view>
- </template>
- <script>
- export default {
- name: "dever-content",
- props: {
- skeleton : {
- type : Boolean,
- value : false
- },
- item : {
- type : Array,
- value : null
- },
- pics : {
- type : Array,
- value : null
- },
- },
- methods:{
-
- },
- }
- </script>
- <style>
- .grace-art-margin{margin-top:20rpx;}
- .grace-art-title{display:block; width:100%; font-size:38rpx; font-weight:bold; line-height:56rpx;}
- .grace-skeletons{background-color:#F8F8F8; border-radius:8rpx; height:60rpx;}
- .grace-skeletons-img{width:100%; background-color:#F8F8F8; height:300rpx; border-radius:8rpx;}
- .grace-art-author{width:700rpx; font-size:0;}
- .grace-art-author-face{width:66rpx; height:66rpx; border-radius:66rpx; margin-right:20rpx; flex-shrink:0;}
- .grace-art-author-name{display:block; line-height:80rpx; font-size:26rpx;}
- .grace-art-btn{width:120rpx; line-height:60rpx; text-align:center; border-radius:50rpx; font-size:26rpx; display:block; flex-shrink:0; margin-left:30rpx;}
- .grace-art-info-line{}
- .grace-art-info-line-text{font-size:22rpx; line-height:50rpx; color:#888888;}
- .grace-art-contents{padding:20rpx 0;}
- .grace-art-img{width:100%; margin:10rpx 0;}
- .grace-art-content{line-height:52rpx; font-size:28rpx;}
- </style>
|
