瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

225 lines
4.1 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <view class="works" @click="$emit('click')">
  3. <view class="box"
  4. :style="{'--sexcolor' : sex[item.sex].color}">
  5. <view class="headPortraitimg">
  6. <image :src="item.userImage" mode="aspectFill"></image>
  7. </view>
  8. <view class="YaoduUniversalWall">
  9. <view class="heide">
  10. <view class="username text-ellipsis">
  11. {{ item.userName }}
  12. </view>
  13. <view class="inde"
  14. v-if="item.sex">
  15. <!-- 性别 -->
  16. {{ item.sex }}
  17. </view>
  18. <view class="inde"
  19. v-if="item.yearDate">
  20. <!-- 年份 -->
  21. {{ item.yearDate }}
  22. </view>
  23. <view class="inde"
  24. v-if="item.address">
  25. <!-- 地址 -->
  26. {{ item.address }}
  27. </view>
  28. <view class="authentication"
  29. v-if="item.isContent">
  30. <!-- 个人认证 -->
  31. {{ item.isContent }}
  32. </view>
  33. </view>
  34. <view class="Times">
  35. <view class="TimeMonth">
  36. <!-- 10-08 -->
  37. {{ item.createTime }}发布
  38. </view>
  39. <!-- <view class="Month">
  40. 12:34
  41. </view> -->
  42. </view>
  43. </view>
  44. </view>
  45. <view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
  46. </view>
  47. <view class="Artworkimages">
  48. <view class="wrokimg"
  49. @click.stop="previewImage(item.image, i)"
  50. :key="i" v-for="(img, i) in item.image">
  51. <image :src="img" mode="aspectFill"></image>
  52. </view>
  53. </view>
  54. <view class="bottom">
  55. <view class="browse">
  56. {{ item.isBrowse }}浏览
  57. </view>
  58. <view class="browse">
  59. {{ item.isComment }}条评论
  60. </view>
  61. <view class="Leavingamessage">
  62. <uv-icon size="40rpx" name="chat"></uv-icon>
  63. </view>
  64. <view class="Leavingamessage"
  65. v-if="del"
  66. @click.stop="$emit('del')">
  67. <uv-icon size="40rpx" name="trash"></uv-icon>
  68. </view>
  69. </view>
  70. </view>
  71. </template>
  72. <script>
  73. import mixinsSex from '@/mixins/sex.js'
  74. export default {
  75. mixins: [mixinsSex],
  76. props: {
  77. item: {},
  78. del : {},
  79. },
  80. data() {
  81. return {
  82. }
  83. },
  84. methods: {
  85. },
  86. }
  87. </script>
  88. <style scoped lang="scss">
  89. .works {
  90. margin: 40rpx 20rpx;
  91. background-color: #fff;
  92. padding: 40rpx;
  93. border-radius: 20rpx;
  94. box-shadow: 0 0 6rpx 6rpx #00000011;
  95. .box {
  96. display: flex;
  97. align-items: center;
  98. .headPortraitimg {
  99. width: 100rpx;
  100. height: 100rpx;
  101. background-color: greenyellow;
  102. border-radius: 15rpx;
  103. overflow: hidden;
  104. image{
  105. width: 100%;
  106. height: 100%;
  107. }
  108. }
  109. .YaoduUniversalWall {
  110. padding: 0rpx 10rpx;
  111. .username {
  112. max-width: 200rpx;
  113. }
  114. .heide {
  115. display: flex;
  116. justify-content: center;
  117. align-items: center;
  118. }
  119. .inde {
  120. display: flex;
  121. justify-content: center;
  122. align-items: center;
  123. padding: 0rpx 10rpx;
  124. margin: 0rpx 5rpx;
  125. font-size: 20rpx;
  126. height: 30rpx;
  127. color: white;
  128. // background-color: rgb(124, 136, 242);
  129. background-color: var(--sexcolor);
  130. border-radius: 7rpx;
  131. flex-shrink: 0;
  132. }
  133. .authentication {
  134. display: flex;
  135. justify-content: center;
  136. align-items: center;
  137. padding: 0rpx 10rpx;
  138. margin: 0rpx 5rpx;
  139. font-size: 20rpx;
  140. height: 34rpx;
  141. padding: 0rpx 10rpx;
  142. color: white;
  143. background-color: #ffd036;
  144. border-radius: 7rpx;
  145. flex-shrink: 0;
  146. }
  147. .Times {
  148. display: flex;
  149. padding: 5rpx 0rpx;
  150. font-size: 20rpx;
  151. margin-top: 10rpx;
  152. .Month {
  153. margin: 0rpx 15rpx;
  154. }
  155. }
  156. }
  157. }
  158. .personalInformation {
  159. display: flex;
  160. .inde {
  161. font-size: 25rpx;
  162. padding: 0rpx 8rpx;
  163. }
  164. .authentication {
  165. font-size: 25rpx;
  166. }
  167. }
  168. .dynamics {
  169. margin-top: 20rpx;
  170. font-size: 28rpx;
  171. // font-weight: bold;
  172. // line-height: 35rpx;
  173. letter-spacing: 3rpx;
  174. }
  175. .Artworkimages {
  176. display: flex;
  177. flex-wrap: wrap;
  178. .wrokimg {
  179. margin: 10rpx;
  180. image {
  181. height: 190rpx;
  182. width: 190rpx;
  183. border-radius: 20rpx;
  184. }
  185. }
  186. }
  187. .bottom {
  188. display: flex;
  189. margin-top: 20rpx;
  190. font-size: 24rpx;
  191. .browse {
  192. margin: 0rpx 30rpx;
  193. color: rgb(132, 132, 132);
  194. }
  195. .Leavingamessage {
  196. height: 20rpx;
  197. width: 20rpx;
  198. margin-left: auto;
  199. }
  200. }
  201. }
  202. </style>