navigator-back.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="navigatorback_container">
  3. <view class="sign">
  4. <view class="robot">
  5. <image src="../../static/nav_robot.png" mode="aspectFit"></image>
  6. </view>
  7. <view class="titleText">SmartAssistant</view>
  8. </view>
  9. <view class="backContent">
  10. <view class="back_image" @click="clickToGoback">
  11. <image src="../../static/goback.png" mode="aspectFit"></image>
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. }
  21. },
  22. methods: {
  23. clickToGoback() {
  24. uni.navigateBack()
  25. }
  26. }
  27. }
  28. </script>
  29. <style lang="scss">
  30. .navigatorback_container{
  31. display: flex;
  32. box-sizing: border-box;
  33. flex-direction: column;
  34. width: 100%;
  35. // height: 105px;
  36. background-color: #2A2832;
  37. .sign{
  38. display: flex;
  39. box-sizing: border-box;
  40. flex-direction: row;
  41. align-items: center;
  42. background: linear-gradient(to right, #303373, #C9A391);
  43. .robot{
  44. margin: 10px 0px;
  45. flex-shrink: 0;
  46. width: 48px;
  47. height: 48px;
  48. margin-left: 15px;
  49. image{
  50. width: 100%;
  51. height: 100%;
  52. }
  53. }
  54. .titleText{
  55. display: flex;
  56. margin-left: 10px;
  57. // height: 100%;
  58. font-size: 30px;
  59. font-weight: 500;
  60. color: #ffffff;
  61. }
  62. }
  63. .backContent{
  64. display: flex;
  65. width: 100%;
  66. .back_image{
  67. margin: 15px 0px;
  68. margin-left: 15px;
  69. width: 35px;
  70. height: 25px;
  71. image{
  72. width: 100%;
  73. height: 100%;
  74. }
  75. }
  76. }
  77. }
  78. </style>