info.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="index tn-safe-area-inset-bottom">
  3. <tn-nav-bar customBack>
  4. <view slot="back" class='tn-custom-nav-bar__back' @click="goBack()">
  5. <text class='icon tn-icon-left'></text>
  6. </view>
  7. <view slot="default" style="display: flex;">
  8. <view style="flex:1;margin-left:25px">
  9. <text>服务协议</text>
  10. </view>
  11. </view>
  12. </tn-nav-bar>
  13. <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
  14. 协议内容
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. }
  23. },
  24. methods: {
  25. goBack() {
  26. uni.navigateBack();
  27. },
  28. }
  29. }
  30. </script>
  31. <style lang="scss" scoped>
  32. /* 胶囊*/
  33. .tn-custom-nav-bar__back {
  34. width: 60%;
  35. height: 100%;
  36. position: relative;
  37. display: flex;
  38. justify-content: space-evenly;
  39. align-items: center;
  40. box-sizing: border-box;
  41. // background-color: rgba(0, 0, 0, 0.15);
  42. border-radius: 1000rpx;
  43. border: 1rpx solid rgba(255, 255, 255, 0.5);
  44. // color: #FFFFFF;
  45. font-size: 18px;
  46. .icon {
  47. display: block;
  48. flex: 1;
  49. margin: auto;
  50. text-align: center;
  51. }
  52. &:before {
  53. content: " ";
  54. width: 1rpx;
  55. height: 110%;
  56. position: absolute;
  57. top: 22.5%;
  58. left: 0;
  59. right: 0;
  60. margin: auto;
  61. transform: scale(0.5);
  62. transform-origin: 0 0;
  63. pointer-events: none;
  64. box-sizing: border-box;
  65. opacity: 0.7;
  66. background-color: #FFFFFF;
  67. }
  68. }
  69. </style>