景徳镇旅游微信小程序
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.

119 lines
2.1 KiB

  1. <template>
  2. <view class="apply">
  3. <navbar title="申请遗迹" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="top-img">
  5. <image src="../static/relic/jdz.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
  6. </view>
  7. <view class="middle-box">
  8. <view class="middle-img">
  9. <view>
  10. <image src="../static/relic/2.png" mode="aspectFill" />
  11. </view>
  12. <view>
  13. <image src="../static/relic/2.png" mode="aspectFill" />
  14. </view>
  15. <view>
  16. <image src="../static/relic/2.png" mode="aspectFill" />
  17. </view>
  18. </view>
  19. <view class="middle-font">
  20. <view>
  21. 申请历程
  22. </view>
  23. <view>
  24. 申遗缘由
  25. </view>
  26. <view>
  27. 遗产价值
  28. </view>
  29. </view>
  30. </view>
  31. <view class="apply-list">
  32. <uv-list @scrolltolower="scrolltolower">
  33. <uv-list-item
  34. title="景德镇:保护文化遗产,复兴千年瓷都"
  35. note="2024-09-01"
  36. border="true"
  37. v-for="(item,index) in 10" :key="index"
  38. >
  39. <template #footer>
  40. <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10rpx" width="240rpx"
  41. height="160rpx" />
  42. </template>
  43. </uv-list-item>
  44. </uv-list>
  45. </view>
  46. <tabber />
  47. </view>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. }
  54. },
  55. methods: {
  56. }
  57. }
  58. </script>
  59. <style scoped lang="scss">
  60. .apply {
  61. .top-img {
  62. height: 380rpx;
  63. }
  64. .middle-box {
  65. display: flex;
  66. position: relative;
  67. height: 220rpx;
  68. align-items: center;
  69. justify-content: space-around;
  70. background-color: #fff;
  71. .middle-img {
  72. display: flex;
  73. align-items: center;
  74. justify-content: space-around;
  75. width: 100%;
  76. view {
  77. width: 160rpx;
  78. height: 160rpx;
  79. image {
  80. width: 100%;
  81. height: 100%;
  82. }
  83. }
  84. }
  85. .middle-font {
  86. position: absolute;
  87. display: flex;
  88. width: 100%;
  89. justify-content: space-around;
  90. view {
  91. width: 60rpx;
  92. color: #FFFDF6;
  93. font-weight: 600;
  94. }
  95. }
  96. }
  97. .apply-list {
  98. width: 94%;
  99. margin-left: 3%;
  100. /deep/ .uv-list-item{
  101. background-color: #FFFDF6 !important;
  102. }
  103. }
  104. }
  105. </style>