AI销管
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

132 行
3.0 KiB

  1. <template>
  2. <view class="help-box">
  3. <view class="left-box">
  4. <view class='list-item' @click="selectFun(index)" :class="{active: currentIndex == index}" v-for="(item,index) in list" :key="index">{{item.name}}</view>
  5. </view>
  6. <view class="right-box">
  7. <view class="title u-line-1">{{list[currentIndex].name}}</view>
  8. <view @click="todetail(item)" class='list-item' v-for="(item,index) in questions" :key="index">
  9. <view class="text u-line-1">{{item.desc}}</view>
  10. <image src="/static/images/right-arrow.png" mode=""></image> </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. let domain = require("@/utils/domain")
  16. export default {
  17. data() {
  18. return {
  19. currentIndex: 0,
  20. list: [
  21. {name:'接待管理接待管理接待管理接待管理接待管理'},
  22. {name:'客户管理'},
  23. {name:'设备管理'},
  24. {name:'顾问管理'},
  25. ],
  26. questions: [
  27. {desc: '如何查看设备是否开启'},
  28. {desc: '如何查看设备是否联网'},
  29. {desc: '如何查看设备是否开启如何查看设备是否开启如何查看设备是否开启如何查看设备是否开启如何查看设备是否开启'},
  30. {desc: '如何查看设备是否没电'},
  31. {desc: '如何查看设备是否开启'},
  32. {desc: '如何查看设备是否没电'},
  33. ]
  34. };
  35. },
  36. onShow() {
  37. },
  38. methods: {
  39. searchFun(){
  40. },
  41. selectFun(index){
  42. this.currentIndex = index;
  43. },
  44. todetail(item){
  45. uni.navigateTo({
  46. url: '/pages/mine/help/helpDetail'
  47. })
  48. }
  49. },
  50. }
  51. </script>
  52. <style lang="scss">
  53. .help-box{
  54. width: 100%;
  55. min-height: 100vh;
  56. overflow: hidden;
  57. background: #F8F8F8;
  58. display: flex;
  59. padding-top: 20rpx;
  60. .left-box{
  61. flex: 0 0 176rpx;
  62. // width: 176rpx;
  63. background: #F0F1F5;
  64. display: flex;
  65. flex-direction: column;
  66. justify-content: flex-start;
  67. .list-item{
  68. height: 100rpx;
  69. line-height: 100rpx;
  70. background: #F0F1F5;
  71. text-align: center;
  72. font-size: 30rpx;
  73. font-family: PingFangSC-Regular, PingFang SC;
  74. font-weight: 400;
  75. color: #333333;
  76. &.active{
  77. background: #fff;
  78. }
  79. }
  80. }
  81. .right-box{
  82. flex: 1;
  83. .title{
  84. width: 570rpx;
  85. height: 100rpx;
  86. line-height: 100rpx;
  87. font-size: 30rpx;
  88. font-family: PingFangSC-Medium, PingFang SC;
  89. font-weight: 500;
  90. color: #303030;
  91. border-bottom : 1rpx solid #E0E0E0;
  92. background: #fff;
  93. padding: 0 30rpx;
  94. }
  95. .list-item{
  96. width: 570rpx;
  97. padding: 0 30rpx;
  98. display: flex;
  99. justify-content: space-between;
  100. align-items: center;
  101. height: 98rpx;
  102. line-height: 98rpx;
  103. font-size: 30rpx;
  104. font-family: PingFangSC-Regular, PingFang SC;
  105. font-weight: 400;
  106. color: #333333;
  107. border-bottom : 1rpx solid #E0E0E0;
  108. background: #fff;
  109. &:last-child{
  110. border: 0;
  111. }
  112. .text{
  113. flex: 1;
  114. }
  115. image{
  116. flex: 0 0 12rpx;
  117. width: 12rpx;
  118. height: 28rpx;
  119. margin-left: 20rpx;
  120. }
  121. }
  122. }
  123. }
  124. </style>