operating.wpy 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <style lang='less' scoped>
  2. page {
  3. height: 100%;
  4. background: #ebf5fa;
  5. }
  6. .operating {
  7. padding-top: 244rpx;
  8. padding-left: 56rpx;
  9. padding-right: 56rpx;
  10. height: 600rpx;
  11. background: linear-gradient(
  12. 180deg,
  13. rgba(61, 203, 204, 0.2) 0%,
  14. rgba(61, 203, 204, 0) 100.34%
  15. );
  16. .each-row {
  17. display: flex;
  18. justify-content: space-between;
  19. align-items: center;
  20. .each-box {
  21. .title {
  22. font-family: PingFang SC;
  23. font-size: 36rpx;
  24. font-weight: 600;
  25. line-height: 56rpx;
  26. color: #1b2129;
  27. }
  28. .text {
  29. width: 416rpx;
  30. overflow: hidden;
  31. text-overflow: ellipsis;
  32. white-space: nowrap;
  33. font-family: PingFang SC;
  34. font-size: 26rpx;
  35. font-weight: 400;
  36. line-height: 40rpx;
  37. color: #626c78;
  38. }
  39. }
  40. .each-img {
  41. width: 94px;
  42. height: 78px;
  43. border-radius: 12px;
  44. }
  45. }
  46. .divider {
  47. border-top: 1px solid #c4c9cf4d;
  48. margin-top: 48rpx;
  49. margin-bottom: 48rpx;
  50. }
  51. }
  52. </style>
  53. <!-- 操作指引 -->
  54. <template>
  55. <page-top-bar
  56. title="操作指引"
  57. titleColor="#1B2129"
  58. icon="{{h5Static+'/page-top-bar/return-icon.svg'}}"
  59. ></page-top-bar>
  60. <div class="operating">
  61. <div
  62. v-for="(item,idx) in arr"
  63. :key="item.title"
  64. >
  65. <div class="each-row">
  66. <div class="each-box">
  67. <div class="title">{{item.title}}</div>
  68. <div class="text">{{item.text}}</div>
  69. </div>
  70. <image
  71. class="each-img"
  72. src="{{h5StaticPath}}/{{ item.img }}"
  73. />
  74. </div>
  75. <div class="divider" v-if="idx != arr.length-1"> </div>
  76. </div>
  77. </div>
  78. </template>
  79. <script>
  80. import wepy from '@wepy/core'
  81. import config from '@/config'
  82. wepy.page({
  83. props: {},
  84. data: {
  85. h5Static: config.h5StaticPath,
  86. h5StaticPath: config.h5StaticPath + '/page-personalCenter',
  87. arr: [
  88. { title: '如何置常驻工区?', text: '设定后将在首页置顶显示,方便调节', img: 'operation-work.png', url: '' },
  89. { title: '如何获取碳积分?', text: '这是一句解释,这是一句解释', img: 'operation-carbon.png', url: '' },
  90. { title: '如何预约加时?', text: '这是一句解释,这是一句解释', img: 'operation-time.png', url: '' }
  91. ]
  92. },
  93. computed: {},
  94. methods: {
  95. },
  96. // 生命周期 - 创建完成(可以访问当前this实例)
  97. created() {
  98. },
  99. // 生命周期 - 挂载完成(可以访问DOM元素)
  100. mounted() {
  101. }
  102. })
  103. </script>
  104. <config>
  105. {
  106. navigationStyle:"custom",
  107. backgroundColor: '#EBF5FA',
  108. usingComponents: {
  109. 'page-top-bar': '~@/components/common/page-top-bar',
  110. 'footer':'./footer'
  111. }
  112. }
  113. </config>