index.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="page-box page-box-bg-fff" >
  3. <view class="top-data">
  4. <view class="top-row">
  5. </view>
  6. <view class="content-row "></view>
  7. </view>
  8. <view class="bottom-data sys-background-fff">
  9. <en-tab :tab-index="1"></en-tab>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. import EnNav from "@/components/en-utils/en-nav/en-nav.vue";
  15. import EnTab from "@/components/en-utils/en-tab/en-tab.vue";
  16. export default {
  17. components: {
  18. EnTab,
  19. EnNav
  20. },
  21. data() {
  22. return {
  23. }
  24. },
  25. watch: {
  26. },
  27. onPageScroll(e) {
  28. if(e.scrollTop > 10){
  29. this.bgckgroundBox = '#16BB5D';
  30. this.isScroll = true;
  31. }else{
  32. this.bgckgroundBox = 'transparent';
  33. this.isScroll = false;
  34. }
  35. },
  36. mounted() {
  37. },
  38. methods: {
  39. },
  40. }
  41. </script>
  42. <style lang="scss" scoped>
  43. .page-box{
  44. height: 100vh;
  45. background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20");
  46. background-repeat: no-repeat;
  47. background-size: 100% auto;
  48. display: flex;
  49. flex-direction: column;
  50. .top-data{
  51. flex: 1;
  52. overflow: hidden;
  53. .top-row{
  54. }
  55. }
  56. .bottom-data{
  57. }
  58. }
  59. </style>