OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 1b648b7768
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1b648b7768'
${ noResults }
aiforge/web_src/vuepages/pages/tech/components/TopHeader.vue

142 lines
6.6 kB
Raw Blame History 

  1. <template>

  2.   <div>

  3.     <div class="bg-container">

  4.       <div class="bg">

  5.         <div class="bg-01"></div>

  6.         <div class="bg-02"></div>

  7.         <div class="bg-03"></div>

  8.         <div class="bg-04"></div>

  9.       </div>

  10.       <div class="title-c">

  11.         <div class="title-main">科技创新2030</div>

  12.         <div class="title-second">新一代人工智能重大项目成果展示</div>

  13.       </div>

  14.       <div class="menu">

  15.         <TopMenu :menu="menu"></TopMenu>

  16.       </div>

  17.     </div>

  18.   </div>

  19. </template>

  20. 

  21. <script>

  22. import TopMenu from './TopMenu.vue';

  23. 

  24. export default {

  25.   name: "TopHeader",

  26.   props: {

  27.     menu: { type: String, default: '' },

  28.   },

  29.   components: {

  30.     TopMenu

  31.   },

  32.   data() {

  33.     return {

  34.       list: [],

  35.     };

  36.   },

  37.   methods: {},

  38.   mounted() { },

  39. };

  40. </script>

  41. 

  42. <style scoped lang="less">

  43. .bg-container {

  44.   height: 200px;

  45.   width: 100%;

  46.   background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.9059999999999998%2C%20-0.8390000000000001%2C%200.016184413580246918%2C%200.9059999999999998%2C%20-0.183%2C%200.683)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232250cf%22%20stop-opacity%3D%221%22%20offset%3D%220.61%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%237c23b4%22%20stop-opacity%3D%221%22%20offset%3D%220.99%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");

  47.   overflow: hidden;

  48.   position: relative;

  49. 

  50.   .bg {

  51.     position: absolute;

  52.     width: 100%;

  53.     height: 100%;

  54.     left: 67%;

  55.     top: 23%;

  56. 

  57.     .bg-01 {

  58.       position: absolute;

  59.       top: -296.85px;

  60.       left: -100.21px;

  61.       width: 11.52px;

  62.       height: 430.36px;

  63.       transform: rotate(46deg);

  64.       border-radius: 45px;

  65.       display: flex;

  66.       background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(2.6570000000000005%2C%20-1.366%2C%201906.3802884596842%2C%202.6570000000000005%2C%20-0.714%2C%201.313)%22%3E%3Cstop%20stop-color%3D%22%2315cf16%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23ed6bc9%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");

  67.     }

  68. 

  69.     .bg-02 {

  70.       position: absolute;

  71.       top: -130.68px;

  72.       left: -213.01px;

  73.       width: 3.64px;

  74.       height: 430.36px;

  75.       transform: rotate(46deg);

  76.       border-radius: 45px;

  77.       background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(2.6570000000000005%2C%20-1.366%2C%2019094.65120710059%2C%202.6570000000000005%2C%20-0.714%2C%201.313)%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23ed6bc9%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");

  78.     }

  79. 

  80.     .bg-03 {

  81.       position: absolute;

  82.       top: -178.07px;

  83.       left: -50.045px;

  84.       width: 111.15px;

  85.       height: 306.28px;

  86.       transform: rotate(46deg);

  87.       border-radius: 63px;

  88.       background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(2.6570000000000005%2C%20-1.366%2C%2010.372156049382713%2C%202.6570000000000005%2C%20-0.714%2C%201.313)%22%3E%3Cstop%20stop-color%3D%22%23f8da77%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23ed6bc9%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");

  89.     }

  90. 

  91.     .bg-04 {

  92.       position: absolute;

  93.       top: -218.72px;

  94.       left: 239.81px;

  95.       width: 20.38px;

  96.       height: 306.28px;

  97.       transform: rotate(46deg);

  98.       border-radius: 45px;

  99.       background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(2.6570000000000005%2C%20-1.366%2C%20308.5173674049777%2C%202.6570000000000005%2C%20-0.714%2C%201.313)%22%3E%3Cstop%20stop-color%3D%22%2377f8f8%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23ed6bc9%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");

  100.     }

  101.   }

  102. 

  103.   .title-c {

  104.     position: absolute;

  105.     top: 0;

  106.     left: 0;

  107.     width: 100%;

  108.     height: 100%;

  109.     z-index: 1;

  110. 

  111.     .title-main {

  112.       text-align: center;

  113.       color: rgba(255, 230, 21, 1);

  114.       font-weight: 700;

  115.       text-shadow: rgb(34 7 94) 0px 2px 6px;

  116.       line-height: 39px;

  117.       font-size: 28px;

  118.       margin: 26px 0 4px;

  119.     }

  120. 

  121.     .title-second {

  122.       text-align: center;

  123.       font-weight: 700;

  124.       text-shadow: rgb(34 7 94) 0px 2px 6px;

  125.       color: rgb(255, 255, 255);

  126.       font-size: 36px;

  127.       font-weight: 500;

  128.       line-height: 50px;

  129.     }

  130.   }

  131. 

  132.   .menu {

  133.     position: absolute;

  134.     bottom: 0;

  135.     height: 40px;

  136.     width: 100%;

  137.     z-index: 2;

  138.     padding: 0 140px;

  139.   }

  140. }

  141. </style>