nuxt初始化
This commit is contained in:
1
nuxt-web/assets/fonts
Symbolic link
1
nuxt-web/assets/fonts
Symbolic link
@@ -0,0 +1 @@
|
||||
../public/fonts
|
||||
1
nuxt-web/assets/images
Symbolic link
1
nuxt-web/assets/images
Symbolic link
@@ -0,0 +1 @@
|
||||
../public/images
|
||||
119
nuxt-web/assets/styles/base/about.css
Normal file
119
nuxt-web/assets/styles/base/about.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/*= Reset =*/
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,th,td,figure{margin:0;padding:0;}
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
|
||||
table{border-collapse:collapse;border-spacing:0;}
|
||||
caption,th{font-weight:normal;text-align:left;}
|
||||
fieldset,img{border:0;}
|
||||
ul li{list-style:none;}
|
||||
h1,h2,h3,h4,h5,h6{font-size:100%;}
|
||||
h5{font-size:18px;margin-bottom:20px;color:#666;}
|
||||
h5 span{font-size:12px;color:#ccc;font-weight:normal;}
|
||||
blockquote:before,blockquote:after,q:before,q:after{content:"";}
|
||||
html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
|
||||
body{font:normal 14px/24px "Helvetica Neue",Helvetica,STheiti,"Microsoft Yahei","冬青黑体简体中文 w3",宋体,Arial,Tahoma,sans-serif,serif;word-wrap:break-word;background: #F0F0F0;}
|
||||
input,button,textarea,select,option,optiongroup{font-family:inherit;font-size:inherit;}
|
||||
code,pre{font-family:"Microsoft YaHei",Consolas,"Courier New",monospace;}
|
||||
.bw0{border: none !important;}
|
||||
*:focus{outline:0;}
|
||||
legend{color:#000;}
|
||||
input,select{vertical-align:middle;}
|
||||
button{overflow:visible;}
|
||||
input.button,button{cursor:pointer;}
|
||||
button,input,select,textarea{margin:0;}
|
||||
textarea{overflow:auto;resize:none;}
|
||||
label[for],input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;}
|
||||
input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0;}
|
||||
a { text-decoration:none;color:#1C3D72 }
|
||||
img{-ms-interpolation-mode:bicubic;}
|
||||
/* new clearfix */
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
* html .clearfix { zoom: 1; } /* IE6 */
|
||||
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
|
||||
.hidden{display:none;}
|
||||
.last{border-bottom:none !important;}
|
||||
blockquote{background:#f9f9f9;padding:8px 20px;border:1px solid #ccc;}
|
||||
.page { display:table;margin:0 auto;background:#fff;-moz-box-shadow: 0 5px 20px #CCCCCC;-webkit-box-shadow: 0 5px 20px #CCCCCC;box-shadow: 0 5px 20px #CCCCCC;}
|
||||
.about { box-shadow:0;-webkit-box-shadow:0;-moz-box-shadow:0; }
|
||||
.header { width:940px;height:90px;margin:0 auto;z-index:8; }
|
||||
.logo { margin:22px 0 0 0;float:left;display:inline; }
|
||||
.link { margin-top:30px;float:right;text-align:right; _width:718px; }
|
||||
.link li { float:left;display:inline;margin-left:60px; }
|
||||
.link li a{color:#4F4E4E;font-size:16px;font-weight:500;padding-bottom:6px;display:block;}
|
||||
.link li.active{border-bottom:2px solid #0066ff;}
|
||||
.link li.active a{color:#0066FF }
|
||||
.link li:hover { border-bottom:2px solid #0066ff;color:#0066FF }
|
||||
.link li a:hover{color:#0066FF }
|
||||
.adlist{padding:20px;}
|
||||
.adlist li{float:left;display:inline;margin-left:30px;margin-bottom:20px;width:110px;}
|
||||
|
||||
.main { width:100%;margin:40px auto 10px auto;font-size:14px;display:table;padding-bottom:10px; border-bottom:1px solid #EEEEEE}
|
||||
.info { width:300px;float:left;margin-right:20px; }
|
||||
.info h3 { width:300px;height:26px;background:url('../../images/ictb.png') no-repeat;font-size:0;margin-bottom:8px; }
|
||||
.info ul{margin-left:-10px;}
|
||||
.info ul li{list-style:none;float:left;width:140px;padding-left:0;background:none;margin-left:10px;}
|
||||
.info ul{margin-left:-10px;}
|
||||
.b2 h3 { background-position:0 -26px; }
|
||||
.b3 { margin:0;position:relative; }
|
||||
.b3 span{position:absolute;right:10px;top:0;background:url('../../images/morelink.gif') no-repeat left center;padding-left:12px;}
|
||||
.b3 span a{color:#8C8C8C;font-weight:600}
|
||||
.b3 h3 { background-position:0 -52px; }
|
||||
.info li { padding:3px 0 3px 12px;background:url('../../images/dian.png') 2px center no-repeat; }
|
||||
.info li a { color:#8c8c8c; }
|
||||
.info p { color:#8c8c8c; }
|
||||
.info p img { display:table;margin:10px 0; }
|
||||
.morelink{padding-top:20px;}
|
||||
.morelink li{float:left;width:180px;}
|
||||
|
||||
.box { width:940px;margin:18px auto 0 auto; }
|
||||
.left { width:140px;border-bottom:2px solid #DDD;background:#FFF;float:left; }
|
||||
.left li:hover { border-left:3px solid #0066ff; }
|
||||
.left li a { height:40px;line-height:40px;display:block;color:#333 }
|
||||
.left li a:hover,.left li.active a{color:#0066FF}
|
||||
.left li.active{border-left:3px solid #0066ff;}
|
||||
.left li {
|
||||
border-left:3px solid #fff;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
margin-bottom: 1px;
|
||||
overflow: hidden;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.event_year { width:60px;border-bottom:2px solid #DDD;text-align:center;float:left;margin-top:10px; }
|
||||
.event_year li { height:40px;line-height:40px;background:#FFF;margin-bottom:1px;font-size:18px;color:#828282;cursor:pointer; }
|
||||
.event_year li.current { width:61px;background:#0066ff url('../../images/jian.png') 60px 0 no-repeat;color:#FFF;text-align:left;padding-left:9px; }
|
||||
.event_list { width:850px;float:right;background:url('../../images/dian3.png') 139px 0 repeat-y;margin:10px 0 20px 0; }
|
||||
.event_list h3 { margin:0 0 10px 132px;font-size:24px;font-family:Georgia;color:#0066ff;padding-left:25px;background:url('../../images/jian.png') 0 -45px no-repeat;height:38px;line-height:30px;font-style:italic; }
|
||||
.event_list li { background:url('../../images/jian.png') 136px -80px no-repeat; }
|
||||
.event_list li span { width:127px;text-align:right;display:block;float:left;margin-top:10px; }
|
||||
.event_list li p { width:680px;margin-left:24px;display:inline-block;padding-left:10px;background:url('../../images/jian.png') -21px 0 no-repeat;line-height:25px;_float:left; }
|
||||
.event_list li p span { width:650px;text-align:left;border-bottom:2px solid #DDD;padding:10px 15px;background:#FFF;margin:0; }
|
||||
|
||||
.titlelist{line-height:24px;color: #8C8C8C;padding-bottom:20px;}
|
||||
.titlelist dt { font-weight: bold;color:#666;white-space: nowrap;margin:10px;}
|
||||
.titlelist dd {padding-left: 13px;}
|
||||
h1 {
|
||||
font-family: Tahoma,Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.hr {
|
||||
border-top: 1px solid #CCD5DE;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.red {
|
||||
color: #0065CB;
|
||||
font-size:15px;
|
||||
}
|
||||
189
nuxt-web/assets/styles/base/component.css
Normal file
189
nuxt-web/assets/styles/base/component.css
Normal file
@@ -0,0 +1,189 @@
|
||||
@font-face {
|
||||
font-family: 'ecoico';
|
||||
src:url('/fonts/timelineicons/ecoico.eot');
|
||||
src:url('/fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/timelineicons/ecoico.woff') format('woff'),
|
||||
url('/fonts/timelineicons/ecoico.ttf') format('truetype'),
|
||||
url('/fonts/timelineicons/ecoico.svg#ecoico') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
} /* Made with http://icomoon.io/ */
|
||||
|
||||
.cbp_tmtimeline {
|
||||
margin: 30px 0 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* The line */
|
||||
.cbp_tmtimeline:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
background: #afdcf8;
|
||||
left: 12.3%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
/* The date/time */
|
||||
.cbp_tmtimeline > li .cbp_tmtime {
|
||||
display: block;
|
||||
width: ;
|
||||
padding-right: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmtime span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
|
||||
font-size: 0.9em;
|
||||
color: #bdd0db;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
|
||||
font-size: 1.9em;
|
||||
color: #3594cb;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
|
||||
color: #6cbfee;
|
||||
}
|
||||
|
||||
/* Right content */
|
||||
.cbp_tmtimeline > li .cbp_tmlabel {
|
||||
margin: 0 0 15px 17%;
|
||||
background: #3594cb;
|
||||
color: #fff;
|
||||
padding: .5em;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
|
||||
background: #6cbfee;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmlabel h2 {
|
||||
margin-top: 0px;
|
||||
padding: 0 0 10px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* The triangle */
|
||||
.cbp_tmtimeline > li .cbp_tmlabel:after {
|
||||
right: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-right-color: #3594cb;
|
||||
border-width: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
|
||||
border-right-color: #6cbfee;
|
||||
}
|
||||
|
||||
/* The icons */
|
||||
.cbp_tmtimeline > li .cbp_tmicon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-family: 'ecoico';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
font-size: 1.4em;
|
||||
line-height: 40px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
background: #46a4da;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 8px #afdcf8;
|
||||
text-align: center;
|
||||
left: 12%;
|
||||
top: 0;
|
||||
margin: 0 0 0 -25px;
|
||||
}
|
||||
|
||||
.cbp_tmicon-phone:before {
|
||||
content: "\e000";
|
||||
}
|
||||
|
||||
.cbp_tmicon-screen:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.cbp_tmicon-mail:before {
|
||||
content: "\e002";
|
||||
}
|
||||
|
||||
.cbp_tmicon-earth:before {
|
||||
content: "\e003";
|
||||
}
|
||||
|
||||
/* Example Media Queries */
|
||||
@media screen and (max-width: 65.375em) {
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 47.2em) {
|
||||
.cbp_tmtimeline:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmtime {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmtime span {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmlabel {
|
||||
margin: 0 0 30px 0;
|
||||
padding: 1em;
|
||||
font-weight: 400;
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmlabel:after {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: #3594cb;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: #6cbfee;
|
||||
}
|
||||
|
||||
.cbp_tmtimeline > li .cbp_tmicon {
|
||||
position: relative;
|
||||
float: right;
|
||||
left: auto;
|
||||
margin: -55px 5px 0 0px;
|
||||
}
|
||||
}
|
||||
|
||||
253
nuxt-web/assets/styles/base/css.css
Normal file
253
nuxt-web/assets/styles/base/css.css
Normal file
@@ -0,0 +1,253 @@
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0;}
|
||||
fieldset,img{border:0;}
|
||||
table{border-collapse:collapse; border-spacing:0;}
|
||||
ol,ul{list-style:none;}
|
||||
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal; font-style:normal;}
|
||||
caption,th{text-align:left;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:normal; font-size:100%;}
|
||||
q:before,q:after{content:'';}
|
||||
abbr,acronym{border:0;}
|
||||
/*--clearfix--*/
|
||||
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
|
||||
.clearfix{display:inline-block;}
|
||||
/*--Hides from IE-mac--*/
|
||||
* html .clearfix{height:1%;}
|
||||
.clearfix{display:block;}
|
||||
|
||||
body {
|
||||
font:14px '微软雅黑',sans-serif;
|
||||
color:#333!important
|
||||
}
|
||||
a {
|
||||
text-decoration:none;
|
||||
color:#5a5a5a;
|
||||
outline:0;
|
||||
blr:expression(this.onFocus=this.blur())
|
||||
}
|
||||
.fl {
|
||||
float:left
|
||||
}
|
||||
.fr {
|
||||
float:right
|
||||
}
|
||||
|
||||
/* history */
|
||||
.history {
|
||||
width:100%;
|
||||
height:1100px;
|
||||
position:relative;
|
||||
background:url("/images/history_bg.webp") center no-repeat
|
||||
}
|
||||
.start-history {
|
||||
width:100%;
|
||||
height:1200px;
|
||||
/*margin:30px auto;*/
|
||||
text-align:center;
|
||||
background:url("/images/history_start.png") no-repeat top center;
|
||||
display:block
|
||||
}
|
||||
.cc_history {
|
||||
color:#2b2b2b;
|
||||
font-size:33px;
|
||||
line-height: 34px;
|
||||
font-weight:400;
|
||||
display:block;
|
||||
padding-top:0px
|
||||
}
|
||||
.next_history {
|
||||
color:#bbb;
|
||||
font-size:16px;
|
||||
line-height: 30px;
|
||||
width:160px;
|
||||
margin:0 auto;
|
||||
/*border-bottom:1px solid #d1d1d1*/
|
||||
}
|
||||
.history-img {
|
||||
height:2050px;
|
||||
width:10%;
|
||||
overflow:hidden;
|
||||
float:left;
|
||||
margin-top:24px;
|
||||
margin-left:8px
|
||||
}
|
||||
.history_mid {
|
||||
width:100%;
|
||||
height:auto;
|
||||
margin:0 auto;
|
||||
background:0
|
||||
}
|
||||
.history_left {
|
||||
width:43%;
|
||||
height:2050px;
|
||||
float:left;
|
||||
clear:left;
|
||||
position:relative;
|
||||
overflow:hidden
|
||||
}
|
||||
.tech_left{
|
||||
width:100%;
|
||||
margin:30px auto;
|
||||
clear:left;
|
||||
position:relative;
|
||||
overflow:hidden
|
||||
}
|
||||
.history_right {
|
||||
width:43%;
|
||||
height:2050px;
|
||||
float:left;
|
||||
position:relative;
|
||||
overflow:hidden
|
||||
}
|
||||
.history_R {
|
||||
width:100%;
|
||||
height:100px;
|
||||
margin-left:500px
|
||||
}
|
||||
.history_L {
|
||||
width:100%;
|
||||
height:100px;
|
||||
float:right;
|
||||
margin-right:500px
|
||||
}
|
||||
.history_r_2005 {
|
||||
margin-top:120px
|
||||
}
|
||||
.history_2007 {
|
||||
width:41%;
|
||||
height:100px;
|
||||
background:#FFF;
|
||||
margin-top:73px
|
||||
}
|
||||
.history_2005_span {
|
||||
float:left;
|
||||
line-height:24px;
|
||||
font-size:18px;
|
||||
color:#0169d7
|
||||
}
|
||||
.history_2005_b {
|
||||
float:left;
|
||||
width:80%;
|
||||
/*height:58px;*/
|
||||
padding: 5px 5px 5px;
|
||||
margin-left:15px;
|
||||
background: #0070d2;
|
||||
border-radius: 4px;
|
||||
background-position:0 -1300px
|
||||
}
|
||||
.history_r_month {
|
||||
float:left;
|
||||
color:#FFF;
|
||||
display:block;
|
||||
width:30px;
|
||||
line-height:25px;
|
||||
height:58px;
|
||||
border-right:1px solid #FFF;
|
||||
margin-left:25px
|
||||
}
|
||||
.history_r_text {
|
||||
float:left;
|
||||
font-size:14px;
|
||||
color:#FFF;
|
||||
display:block;
|
||||
line-height:25px;
|
||||
padding-left:5px;
|
||||
text-align:left
|
||||
}
|
||||
.year2006 {
|
||||
margin-top:175px
|
||||
}
|
||||
.year2009 {
|
||||
margin-top:65px
|
||||
}
|
||||
.year2011 {
|
||||
margin-top:53px
|
||||
}
|
||||
.year211 {
|
||||
margin-top:43px
|
||||
}
|
||||
.year2013 {
|
||||
margin-top:62px
|
||||
}
|
||||
.yearalmost {
|
||||
margin-top:5px
|
||||
}
|
||||
.yearalmostr {
|
||||
margin-top:12px
|
||||
}
|
||||
.history_2008 {
|
||||
width:41%;
|
||||
height:100px;
|
||||
background:#FFF;
|
||||
margin-top:73px;
|
||||
float:right
|
||||
}
|
||||
.history_2011 {
|
||||
width:41%;
|
||||
height:100px;
|
||||
background:#FFF;
|
||||
margin-top:43px;
|
||||
float:right
|
||||
}
|
||||
.history_2006_span {
|
||||
float:right;
|
||||
line-height:24px;
|
||||
font-size:18px;
|
||||
color:#0169d7
|
||||
}
|
||||
.history_2006_b {
|
||||
width:80%;
|
||||
/*height:58px;*/
|
||||
float:right;
|
||||
padding: 5px 5px 5px;
|
||||
margin-right:15px;
|
||||
background:#0070d2;
|
||||
border-radius: 4px;
|
||||
/*background:url("/images/sprites.png") center;*/
|
||||
background-position:0 -1200px
|
||||
}
|
||||
.blue {
|
||||
background-position:0 -1400px!important
|
||||
}
|
||||
.blue_R {
|
||||
background-position:0 -1500px!important
|
||||
}
|
||||
.yellow {
|
||||
background-position:0 -1600px!important
|
||||
}
|
||||
.yellow_R {
|
||||
background-position:0 -1700px!important
|
||||
}
|
||||
.history_l_month {
|
||||
float:right;
|
||||
color:#FFF;
|
||||
display:block;
|
||||
width:30px;
|
||||
line-height:25px;
|
||||
/*height:58px;*/
|
||||
border-left:1px solid #FFF;
|
||||
margin-right:37px
|
||||
}
|
||||
span.blue {
|
||||
color:#0169d7
|
||||
}
|
||||
span.yellow {
|
||||
color:#f76d02
|
||||
}
|
||||
.history_l_text {
|
||||
float:right;
|
||||
font-size:14px;
|
||||
color:#FFF;
|
||||
display:block;
|
||||
/*height:58px;*/
|
||||
line-height:25px;
|
||||
padding-top:3px;
|
||||
text-align:right;
|
||||
padding-right:5px
|
||||
}
|
||||
.smalltext {
|
||||
font-size:14px;
|
||||
line-height:18px
|
||||
}
|
||||
.smalltxt {
|
||||
font-size:14px
|
||||
}
|
||||
64
nuxt-web/assets/styles/base/default.css
Normal file
64
nuxt-web/assets/styles/base/default.css
Normal file
@@ -0,0 +1,64 @@
|
||||
/* General Blueprint Style */
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext);
|
||||
@font-face {
|
||||
font-family: 'fontawesome';
|
||||
src:url('/fonts/fontawesome.eot');
|
||||
src:url('/fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/fontawesome.svg#fontawesome') format('svg'),
|
||||
url('/fonts/fontawesome.woff') format('woff'),
|
||||
url('/fonts/fontawesome.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
body, html { font-size: 100%; padding: 0; margin: 0;}
|
||||
|
||||
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
.clearfix:before, .clearfix:after { content: " "; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
body {
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif;
|
||||
color: #47a3da;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.icon-drop:before,
|
||||
.icon-arrow-left:before {
|
||||
font-family: 'fontawesome';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 2;
|
||||
text-align: center;
|
||||
color: #47a3da;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-indent: 8000px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.container > header nav a:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-drop:before {
|
||||
content: "\e000";
|
||||
}
|
||||
|
||||
.icon-arrow-left:before {
|
||||
content: "\f060";
|
||||
}
|
||||
96
nuxt-web/assets/styles/base/history.css
Normal file
96
nuxt-web/assets/styles/base/history.css
Normal file
@@ -0,0 +1,96 @@
|
||||
*{margin:0;padding:0;list-style-type:none;}
|
||||
a,img{border:0;}
|
||||
body{_background-image:url(about:blank);/*用浏览器空白页面作为背景*/_background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/ }
|
||||
body{color:#535353;font-size:12px;font-family: "arial","微软雅黑";background:#f0f1f1;}
|
||||
.clear{clear:both;display:block;height:0;overflow:hidden;}
|
||||
|
||||
/* history */
|
||||
#history{width:880px;height:450px;position:relative;margin:50px auto 0 auto;}
|
||||
.title{height:95px;line-height:95px;text-indent:280px;}
|
||||
.title h2{color:#7c7c7c;font-size:18px;font-weight:500;}
|
||||
#circle{
|
||||
width:83px;height:83px;position:absolute;top:0;left:390px;border:6px solid rgba(0,0,0,0.15);border-radius:95px;text-indent:0;text-align:center;
|
||||
-webkit-transition:all 0.3s linear;
|
||||
-moz-transition:all 0.3s linear;
|
||||
-o-transition:all 0.3s linear;
|
||||
transition:all 0.3s linear;
|
||||
}
|
||||
#circle .cmsk{height:83px;position:absolute;width:83px;top:0;left:0;}
|
||||
#circle:hover{
|
||||
transform:rotate(360deg);
|
||||
-ms-transform:rotate(360deg);
|
||||
-moz-transform:rotate(360deg);
|
||||
-webkit-transform:rotate(360deg);
|
||||
-o-transform:rotate(360deg);
|
||||
border-color:rgba(0,0,0,0);
|
||||
}
|
||||
.clock{display:block;}
|
||||
#circle:hover {border-color:rgba(255,255,255,0.6);background-color:#6bc30d;}
|
||||
#circle:hover .clock{display:block;}
|
||||
#circle:hover .circlecontent{display:none;}
|
||||
#circle span{font-size:18px;color:#b0b0b0;}
|
||||
#circle .clock{
|
||||
background:url(/images/clock.png) no-repeat 0 0;width:83px;height:83px;position:absolute;top:0;left:0;display:none;
|
||||
-webkit-transition:all 0.5s linear;
|
||||
-moz-transition:all 0.5s linear;
|
||||
-o-transition:all 0.5s linear;
|
||||
transition:all 0.5s linear;
|
||||
border-radius:0;
|
||||
}
|
||||
#circle:hover .clock{border-radius:83px;}
|
||||
.timeyear{color:#b0b0b0;font-size:18px;line-height:20px;}
|
||||
.timeblock{height:28px;margin-top:22px;margin-left:5px;}
|
||||
.timeblock span{display:block;height:24px;width:18px;background:url(/images/date.png) no-repeat 0 0;float:left;}
|
||||
.timeblock .numf{background-position:0px -48px;}
|
||||
.timeblock .nums{background-position:0px 0px;}
|
||||
.timeblock .numt{background-position:0px -24px;}
|
||||
.timeblock .numfo{background-position:0px -72px;}
|
||||
#content{height:355px;width:880px;overflow:hidden;background:url(/images/vertical.png) no-repeat 134px 2px;padding-top:10px;}
|
||||
.list{overflow:hidden;position:relative;}
|
||||
.list li{height:110px;vertical-align:bottom;overflow:hidden;position:relative;}
|
||||
.liwrap{height:55px;margin-top:28px;}
|
||||
.lileft{position:absolute;top:0;left:0px;height:55px;width:100px;line-height:55px;text-align:right;}
|
||||
.liright{position:absolute;top:0;left:180px;height:55px;}
|
||||
.histt{height:35px;line-height:35px;}
|
||||
.hisct{font-size:14px;color:#6e6e6e;}
|
||||
.md{font-size:18px;color:#AEAEAE;}
|
||||
.year{font-size:12px;color:#AEAEAE;margin-right:10px;}
|
||||
.point{width:55px;height:55px;position:absolute;top:0;left:109px;background:url(/images/point.png) no-repeat 0px 18px;overflow:hidden;}
|
||||
.point b{
|
||||
height:16px;width:16px;background:#fff;display:block;margin:17px 0 0 19px;border-radius:18px;border:2px solid #6bc30d;
|
||||
-webkit-transition:all 0.1s linear;
|
||||
-moz-transition:all 0.1s linear;
|
||||
-o-transition:all 0.1s linear;
|
||||
transition:all 0.1s linear;
|
||||
position:absolute;
|
||||
top:0;left:0;
|
||||
}
|
||||
.thiscur .point b{border:7px solid rgba(107,195,13,0.6);margin:12px 0px 0px 14px;border-radius:52px;}
|
||||
.thiscur .histt a{color:#6bc30d;}
|
||||
.histt a{
|
||||
font-size:24px;color:#747474;
|
||||
-webkit-transition:all 0.3s linear;
|
||||
-moz-transition:all 0.3s linear;
|
||||
-o-transition:all 0.3s linear;
|
||||
transition:all 0.3s linear;
|
||||
}
|
||||
#arrow{position:fixed;top:50%;right:30px;}
|
||||
*html #arrow{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin-top:350px;}
|
||||
|
||||
#arrow ul li{
|
||||
display:block;height:20px;width:20px;background:url(/images/icons.png) no-repeat 0 0;cursor:pointer;
|
||||
-webkit-transition:all 0.2s ease-out;
|
||||
-moz-transition:all 0.2s ease-out;
|
||||
-o-transition:all 0.2s ease-out;
|
||||
transition:all 0.2s ease-out;
|
||||
}
|
||||
#arrow ul li:active{background-color:#000;}
|
||||
#arrow ul .arrow_active{
|
||||
background-color:#000;
|
||||
-webkit-transition:all 0.1s ease-in;
|
||||
-moz-transition:all 0.1s ease-in;
|
||||
-o-transition:all 0.1s ease-in;
|
||||
transition:all 0.1s ease-in;
|
||||
}
|
||||
#arrow ul .arrowup{background-position:0px -26px;margin-bottom:10px;}
|
||||
#arrow ul .arrowdown{background-position:0px 0px;}
|
||||
492
nuxt-web/assets/styles/base/navigation2.css
Normal file
492
nuxt-web/assets/styles/base/navigation2.css
Normal file
@@ -0,0 +1,492 @@
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.of {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cl {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.fixDiv{
|
||||
position:fixed !important;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.header-b {
|
||||
background: url("/images/bg.jpg");
|
||||
height: 60px;
|
||||
background-size: 100% 100%;
|
||||
/* overflow: hidden; */
|
||||
line-height: 60px;
|
||||
z-index: 51;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-b .logo img {
|
||||
max-width: 300px;
|
||||
width: 80%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.header-b ul {
|
||||
margin-right: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-b ul li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
line-height: 57px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.header-b ul li a img {
|
||||
height: 36px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.header-b ul li a p {
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
margin-top: -24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-w {
|
||||
background-color: #0095ff;
|
||||
height: 60px;
|
||||
/* overflow: hidden; */
|
||||
line-height: 60px;
|
||||
z-index: 51;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-w .logo {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.header-w .logo img {
|
||||
max-width: 300px;
|
||||
width: 80%;
|
||||
margin-top: 6px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.header-w ul {
|
||||
margin-right: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-w ul li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
padding: 0 30px;
|
||||
line-height: 57px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #fff;
|
||||
height: 60px;
|
||||
/* overflow: hidden; */
|
||||
line-height: 60px;
|
||||
z-index: 51;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1);
|
||||
/*-webkit-transition: all 0.2s ease;*/
|
||||
/*transition: all 0.2s ease;*/
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.header .logo img {
|
||||
margin-top: -3px;
|
||||
max-width: 300px;
|
||||
width: 80%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.header ul {
|
||||
margin-right: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header ul li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
padding: 0 30px;
|
||||
|
||||
line-height: 57px;
|
||||
}
|
||||
|
||||
.header_right {
|
||||
height: 60px;
|
||||
/*margin-right: 100px;*/
|
||||
}
|
||||
|
||||
.head-cur {
|
||||
/*background: #0077e6;*/
|
||||
/*color: #FFFFFF ;*/
|
||||
height: 58px;
|
||||
color: #0077e6 !important;
|
||||
border-bottom: 2px solid #0077e6;
|
||||
/*margin-top: -2px;*/
|
||||
}
|
||||
|
||||
.head-cur a {
|
||||
color: #0077e6;
|
||||
}
|
||||
|
||||
.header ul li a {
|
||||
padding: 0;
|
||||
display: block;
|
||||
line-height: 57px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login_btn {
|
||||
float: left;
|
||||
color: #0077e6;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
padding: 0 8px;
|
||||
height: 16px;
|
||||
margin-top: 22px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.login_btn2 {
|
||||
float: left;
|
||||
color: #0077e6;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
padding: 0 8px;
|
||||
height: 16px;
|
||||
margin-top: 22px;
|
||||
border-left: 1.5px solid #0077e6;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
/*.header ul li a:hover {*/
|
||||
/*border-bottom: 3px solid #001c77;*/
|
||||
/*}*/
|
||||
|
||||
.header .right a {
|
||||
color: #1034aa;
|
||||
padding: 6px 25px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #1034aa;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.head-nav {
|
||||
/*position: relative;*/
|
||||
width: 1280px;
|
||||
/*z-index: 9999;*/
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.head-nav-con {
|
||||
width: 1280px;
|
||||
margin: auto;
|
||||
/*position: absolute;*/
|
||||
}
|
||||
|
||||
.head-nav-con ul li {
|
||||
/*width: 100px;*/
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 57px;
|
||||
}
|
||||
|
||||
.nav > ul {
|
||||
*zoom: 1;
|
||||
*clear: both;
|
||||
}
|
||||
|
||||
.nav > ul:before, .nav > ul:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.nav > ul > li {
|
||||
/*width: 13%;*/
|
||||
/*float: left;*/
|
||||
/*margin-left: 1%;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav > ul > li > a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
/* font-weight: bold; */
|
||||
/*color: #313131;*/
|
||||
}
|
||||
|
||||
.nav > ul > li > a:after {
|
||||
content: '';
|
||||
/*display: block;*/
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #117be5;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav > ul > li.cur > a:after, .nav > ul > li:hover > a:after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav > ul > li.cur > a, .nav > ul > li:hover > a {
|
||||
/*color: #001c77;*/
|
||||
color: #0077e6;
|
||||
}
|
||||
|
||||
.nav > ul ul {
|
||||
width: 170px;
|
||||
/*border: #ccc 1px solid;*/
|
||||
/*border-top: #001c77 2px solid;*/
|
||||
background-color:#134a95;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
padding: 10px 0;
|
||||
/*left: 0;*/
|
||||
top: 60px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
left: 50%;
|
||||
margin-left: -75px; /* box-shadow:0 0 5px #333; */
|
||||
/*transition: all 0.25s ease 0s;*/
|
||||
/*-webkit-transform: translate(0, 20px);*/
|
||||
/*-moz-transform: translate(0, 20px);*/
|
||||
/*-ms-transform: translate(0, 20px);*/
|
||||
/*-o-transform: translate(0, 20px);*/
|
||||
/*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
}
|
||||
|
||||
|
||||
.list {
|
||||
width: 1100px;
|
||||
background-color: #134a95;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
left: 50%;
|
||||
margin-left: -600px; /* box-shadow:0 0 5px #333; */
|
||||
/*transition: all 0.25s ease 0s;*/
|
||||
/*-webkit-transform: translate(0, 20px);*/
|
||||
/*-moz-transform: translate(0, 20px);*/
|
||||
/*-ms-transform: translate(0, 20px);*/
|
||||
/*-o-transform: translate(0, 20px);*/
|
||||
/*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
}
|
||||
.list .pd {
|
||||
float: left;
|
||||
width: 190px;
|
||||
overflow: hidden;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
.list h2{
|
||||
font-size: 14px;
|
||||
color: rgba(187, 208, 239, 0.96);
|
||||
line-height: 35px;
|
||||
float: left;
|
||||
padding-left: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.list .pd li {
|
||||
width: 250px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.list .pd ul{
|
||||
position: static;
|
||||
opacity: 1;
|
||||
margin-left: 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
width: 250px;}
|
||||
|
||||
.nav > ul ul li {
|
||||
width: 240px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav > ul ul a {
|
||||
display: block;
|
||||
line-height: 22px;
|
||||
padding: 4px 30px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav > ul ul a:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
overflow: hidden;
|
||||
background: url("/images/nav_arr.png") -10px 0 no-repeat;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: 12px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav > ul ul a:hover {
|
||||
/*background-color: #f9f9f9;*/
|
||||
color:#010e22;
|
||||
}
|
||||
|
||||
.nav > ul ul a:hover:after {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.nav > ul > li:hover ul {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
/*-webkit-transform: translate(0, 0);*/
|
||||
/*-moz-transform: translate(0, 0);*/
|
||||
/*-ms-transform: translate(0, 0);*/
|
||||
/*-o-transform: translate(0, 0);*/
|
||||
}
|
||||
.nav > ul > li:hover .list {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
/*-webkit-transform: translate(0, 0);*/
|
||||
/*-moz-transform: translate(0, 0);*/
|
||||
/*-ms-transform: translate(0, 0);*/
|
||||
/*-o-transform: translate(0, 0);*/
|
||||
}
|
||||
.nav .nav_svc .prd_svc {
|
||||
float: left;
|
||||
width: 225px;
|
||||
/* border-left: 1px solid #eee; */
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
.nav .nav_svc .prd_svc h2 {
|
||||
font-size: 14px;
|
||||
color: rgba(187, 208, 239, 0.96);
|
||||
line-height: 35px;
|
||||
float: left;
|
||||
padding-left: 35px;
|
||||
font-weight: 500;
|
||||
/*padding-left: 32px;*/
|
||||
/*margin-top: -10px*/
|
||||
}
|
||||
|
||||
.nav .nav_svc {
|
||||
width: 1000px;
|
||||
/* border: #ccc 1px solid; */
|
||||
/* border-top: #001c77 2px solid; */
|
||||
background-color: #0156c4;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
/* left: 0; */
|
||||
top: 80px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* left: 50%; */
|
||||
margin-left: -600px;
|
||||
/* box-shadow:0 0 5px #333; */
|
||||
/*-webkit-transform: translate(0, 20px);*/
|
||||
/*-moz-transform: translate(0, 20px);*/
|
||||
/*-ms-transform: translate(0, 20px);*/
|
||||
/*-o-transform: translate(0, 20px);*/
|
||||
/*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
/*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
|
||||
}
|
||||
|
||||
.nav .nav_svc .prd_svc ul {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
margin-left: 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
width: 225px;
|
||||
}
|
||||
|
||||
.nav .nav_svc .prd_svc ul li {
|
||||
width: 225px;
|
||||
}
|
||||
|
||||
.nav > ul > li:hover .nav_svc {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.fix {
|
||||
*zoom: 1;
|
||||
*clear: both;
|
||||
}
|
||||
|
||||
.fix:before, .fix:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
1140
nuxt-web/assets/styles/base/pro.css
Normal file
1140
nuxt-web/assets/styles/base/pro.css
Normal file
File diff suppressed because it is too large
Load Diff
537
nuxt-web/assets/styles/base/product.css
Normal file
537
nuxt-web/assets/styles/base/product.css
Normal file
@@ -0,0 +1,537 @@
|
||||
:root {
|
||||
--product-section-heading-gap: 48px;
|
||||
--product-section-heading-inner-gap: 14px;
|
||||
}
|
||||
|
||||
.cargo-platform-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cargo-info-left {
|
||||
width: 540px;
|
||||
flex: 0 0 540px;
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cargo-info-left--compact {
|
||||
flex-basis: 540px;
|
||||
}
|
||||
|
||||
.cargo-info-left h2,
|
||||
.cargo-info-left p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cargo-info-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-hero-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.page-title.page-title-cargo-platform .container.product-hero-container,
|
||||
.page-title.page-title-cargo-platform1 .container.product-hero-container,
|
||||
.page-title.page-title-cargo-platform2 .container.product-hero-container,
|
||||
.page-title.page-title-cargo-platform3 .container.product-hero-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-hero-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-hero-description {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.page-title-cargo-platform .product-hero-title,
|
||||
.page-title-cargo-platform .product-hero-description,
|
||||
.page-title-cargo-platform2 .product-hero-title,
|
||||
.page-title-cargo-platform2 .product-hero-description,
|
||||
.page-title-cargo-platform3 .product-hero-title,
|
||||
.page-title-cargo-platform3 .product-hero-description {
|
||||
color: #021c3e;
|
||||
}
|
||||
|
||||
.page-title-cargo-platform1 .product-hero-title {
|
||||
color: #021c3e;
|
||||
}
|
||||
|
||||
.page-title-cargo-platform1 .product-hero-description {
|
||||
color: #012e67;
|
||||
}
|
||||
|
||||
.main2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-architecture-section {
|
||||
padding: 30px 0;
|
||||
background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%);
|
||||
}
|
||||
|
||||
.product-architecture-section .text-center > p {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.product-architecture-section img {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.product-architecture-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.product-architecture-title {
|
||||
margin: 40px 0 var(--product-section-heading-inner-gap);
|
||||
}
|
||||
|
||||
.product-architecture-title--compact {
|
||||
margin-bottom: var(--product-section-heading-inner-gap);
|
||||
}
|
||||
|
||||
.product-advantages-header {
|
||||
padding-top: 60px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-advantages-header--compact {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.product-advantages-title {
|
||||
margin-bottom: var(--product-section-heading-inner-gap);
|
||||
}
|
||||
|
||||
.product-advantages-title--spacious {
|
||||
margin-bottom: var(--product-section-heading-inner-gap);
|
||||
}
|
||||
|
||||
.product-advantages-header p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-advantages-section {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.feature-highlight-section {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
padding-top: 60px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.feature-highlight-heading {
|
||||
text-align: center;
|
||||
margin-bottom: var(--product-section-heading-gap);
|
||||
}
|
||||
|
||||
.feature-highlight-heading h1 {
|
||||
margin: 0 0 var(--product-section-heading-inner-gap);
|
||||
color: #10233f;
|
||||
}
|
||||
|
||||
.feature-highlight-heading p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-highlight-tabs {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #dfe8f3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-highlight-tabs li {
|
||||
flex: 0 0 auto;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.feature-highlight-tab {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 16px 10px 18px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #4f5f76;
|
||||
font-size: clamp(16px, 0.95vw, 18px);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: color 0.25s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feature-highlight-tab:hover,
|
||||
.feature-highlight-tab:focus {
|
||||
color: #1c6de0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.feature-highlight-tab.active {
|
||||
color: #006aff;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: #1b68db;
|
||||
text-decoration-thickness: 4px;
|
||||
text-underline-offset: 18px;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
.feature-highlight-tab.active:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.feature-highlight-panel {
|
||||
display: none;
|
||||
padding-top: 54px;
|
||||
}
|
||||
|
||||
.feature-highlight-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-highlight-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 56px;
|
||||
}
|
||||
|
||||
.feature-highlight-copy {
|
||||
flex: 1 1 52%;
|
||||
max-width: 520px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.feature-highlight-copy h2 {
|
||||
margin: 0 0 18px;
|
||||
color: #101820;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.feature-highlight-copy p {
|
||||
margin: 0;
|
||||
color: #4f5f76;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.feature-highlight-points {
|
||||
margin: 28px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.feature-highlight-points li {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
padding-left: 22px;
|
||||
color: #24374f;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.feature-highlight-points li:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #1c6de0;
|
||||
box-shadow: 0 0 0 6px rgba(28, 109, 224, 0.12);
|
||||
}
|
||||
|
||||
.feature-highlight-visual {
|
||||
flex: 1 1 48%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-highlight-visual-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
min-height: 300px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid rgba(40, 122, 221, 0.08);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, rgba(247, 251, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
|
||||
box-shadow: 0 10px 24px rgba(22, 72, 140, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-highlight-visual-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 8px 14px rgba(30, 88, 165, 0.08));
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.feature-highlight-tab {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-highlight-copy h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.feature-highlight-detail {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 34px;
|
||||
}
|
||||
|
||||
.feature-highlight-copy,
|
||||
.feature-highlight-visual {
|
||||
max-width: none;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.feature-highlight-copy h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cargo-platform-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cargo-info-left {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding-right: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cargo-info-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.feature-highlight-section {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.feature-highlight-heading p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-highlight-tabs li {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.feature-highlight-tabs {
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.feature-highlight-tab {
|
||||
padding: 14px 8px 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.feature-highlight-tab.active {
|
||||
text-underline-offset: 16px;
|
||||
}
|
||||
|
||||
.feature-highlight-tabs {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.feature-highlight-panel {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.feature-highlight-copy h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.feature-highlight-copy p,
|
||||
.feature-highlight-points li {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-highlight-visual-card {
|
||||
min-height: 210px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.feature-highlight-visual-card img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cases-section {
|
||||
padding: 0px 0 80px 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.cases-section .product-advantages-header,
|
||||
.cases-section .product-advantages-header > div,
|
||||
.cases-section .product-advantages-title,
|
||||
.cases-section .product-advantages-header p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cases-section .product-advantages-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.case-card-link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.case-card-link:hover,
|
||||
.case-card-link:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cases-section .row + .row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.cases-section .row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cases-section .col-md-4 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.case-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e2e8f0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.case-card-header {
|
||||
position: relative;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-card-header.blue {
|
||||
background: linear-gradient(135deg, rgba(0, 60, 180, 1), rgba(0, 100, 255, 1));
|
||||
}
|
||||
|
||||
.case-card-header.cyan {
|
||||
background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
|
||||
}
|
||||
|
||||
.case-card-header.teal {
|
||||
background: linear-gradient(135deg, rgba(0, 110, 140, 1), rgba(0, 160, 190, 1));
|
||||
}
|
||||
|
||||
.case-card-header.green {
|
||||
background: linear-gradient(135deg, rgba(0, 120, 90, 1), rgba(40, 180, 120, 1));
|
||||
}
|
||||
|
||||
.case-card-header.indigo {
|
||||
background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
|
||||
}
|
||||
|
||||
.case-card-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.case-card-header h3 {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.case-card-body {
|
||||
padding: 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.case-project {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 100, 255, 1);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.case-card-body p {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.cases-section .row + .row {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.cases-section .col-md-4 + .col-md-4 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
1109
nuxt-web/assets/styles/base/solution.css
Normal file
1109
nuxt-web/assets/styles/base/solution.css
Normal file
File diff suppressed because it is too large
Load Diff
8195
nuxt-web/assets/styles/base/style.css
Normal file
8195
nuxt-web/assets/styles/base/style.css
Normal file
File diff suppressed because it is too large
Load Diff
48
nuxt-web/assets/styles/base/style2.css
Normal file
48
nuxt-web/assets/styles/base/style2.css
Normal file
@@ -0,0 +1,48 @@
|
||||
|
||||
|
||||
/*经典案例*/
|
||||
/*关于我们*/
|
||||
.ti{
|
||||
margin: 40px 0;}
|
||||
|
||||
.main2 {
|
||||
|
||||
padding: 40px 0 50px 0;
|
||||
|
||||
}
|
||||
|
||||
.main2 dl {
|
||||
width: 33%;
|
||||
margin: 0 1.1%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main2 dl img {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main2 dl dt {
|
||||
|
||||
font-size: 14px;
|
||||
width: 85%;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
color: #666;
|
||||
line-height: 26px;
|
||||
|
||||
}
|
||||
|
||||
.main2 dl .tit {
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*新加导航下拉*/
|
||||
|
||||
430
nuxt-web/assets/styles/base/timeline.css
Normal file
430
nuxt-web/assets/styles/base/timeline.css
Normal file
@@ -0,0 +1,430 @@
|
||||
/* ============================================
|
||||
智慧时间轴组件 - 横向展开式
|
||||
Smart Timeline Component - Horizontal Expansion
|
||||
============================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Oswald:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--tl-bg-color: #f8fafc;
|
||||
--tl-line-color: rgba(20, 129, 255, 0.3);
|
||||
--tl-active-color: #1481ff;
|
||||
--tl-text-color: #2a3e5d;
|
||||
--tl-year-color: #102541;
|
||||
--tl-transition-speed: 0.5s;
|
||||
}
|
||||
|
||||
/* Section 容器 */
|
||||
.timeline-section {
|
||||
width: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 20%, rgba(20, 129, 255, 0.08) 0%, transparent 20%),
|
||||
radial-gradient(circle at 90% 80%, rgba(20, 129, 255, 0.05) 0%, transparent 20%);
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.timeline-title {
|
||||
color: var(--tl-year-color);
|
||||
letter-spacing: 4px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 36px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.timeline-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
min-height: 500px;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 主轴线 */
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
top: 66.67%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
var(--tl-line-color) 5%,
|
||||
var(--tl-line-color) 95%,
|
||||
transparent 100%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 时间节点 */
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
transition: flex var(--tl-transition-speed) cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
border-right: 1px solid rgba(20, 129, 255, 0.1);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.timeline-item:hover {
|
||||
flex: 10;
|
||||
background: linear-gradient(90deg, rgba(20, 129, 255, 0.08) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.timeline-container:hover .timeline-item:not(:hover) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* 节点圆点 */
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--tl-active-color);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 66.67%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 10px var(--tl-active-color);
|
||||
transition: all var(--tl-transition-speed);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline-item:hover .dot {
|
||||
background-color: var(--tl-active-color);
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
box-shadow: 0 0 20px rgba(20, 129, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 竖向年份标签 */
|
||||
.year-label {
|
||||
position: absolute;
|
||||
top: calc(66.67% + 15px);
|
||||
left: 50%;
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(90deg);
|
||||
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--tl-year-color);
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.8;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 竖向文字中的简短描述 */
|
||||
.short-desc {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Hover 状态下：标签变大并移到底部背景 */
|
||||
.timeline-item:hover .year-label {
|
||||
top: auto;
|
||||
bottom: -10px;
|
||||
left: 20px;
|
||||
transform: rotate(0deg);
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
opacity: 0.08;
|
||||
color: var(--tl-active-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hover时隐藏简述 */
|
||||
.timeline-item:hover .short-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 内容区域 - 固定在时间轴线上方 */
|
||||
.content {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.4s ease 0.1s;
|
||||
padding: 0 40px;
|
||||
color: var(--tl-text-color);
|
||||
position: absolute;
|
||||
|
||||
bottom: 36%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.timeline-item:hover .content {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.content-date {
|
||||
display: block;
|
||||
color: var(--tl-active-color);
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 20px rgba(20, 129, 255, 0.2);
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size:0.9rem;
|
||||
line-height: 1.8;
|
||||
border-left: 3px solid var(--tl-active-color);
|
||||
padding-left: 20px;
|
||||
max-width: 650px;
|
||||
background: linear-gradient(90deg, rgba(20, 129, 255, 0.08) 0%, transparent 100%);
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.content-text p {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.content-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 重要节点高亮 */
|
||||
.timeline-item.highlight .dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
box-shadow: 0 0 15px var(--tl-active-color), 0 0 30px var(--tl-active-color);
|
||||
}
|
||||
|
||||
.timeline-item.highlight .year-label {
|
||||
color: var(--tl-active-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
自动轮播展开效果（与hover效果一致）
|
||||
============================================ */
|
||||
.timeline-item.auto-expanded {
|
||||
flex: 10;
|
||||
background: linear-gradient(90deg, rgba(20, 129, 255, 0.08) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.timeline-container:has(.auto-expanded) .timeline-item:not(.auto-expanded) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.timeline-item.auto-expanded .dot {
|
||||
background-color: var(--tl-active-color);
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
box-shadow: 0 0 20px rgba(20, 129, 255, 0.6);
|
||||
}
|
||||
|
||||
.timeline-item.auto-expanded .year-label {
|
||||
top: auto;
|
||||
bottom: -10px;
|
||||
left: 20px;
|
||||
transform: rotate(0deg);
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
opacity: 0.08;
|
||||
color: var(--tl-active-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.timeline-item.auto-expanded .short-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-item.auto-expanded .content {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
响应式设计
|
||||
============================================ */
|
||||
@media (max-width: 1200px) {
|
||||
.timeline-container {
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.year-label {
|
||||
font-size: 12px;
|
||||
top: calc(66.67% + 15px);
|
||||
}
|
||||
|
||||
.short-desc {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 1rem;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.content-date {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.timeline-section {
|
||||
padding: 40px 0;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
min-height: 500px;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
min-width: 80px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.timeline-item:hover {
|
||||
flex: none;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 0.9rem;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline-title {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.timeline-item:hover {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.year-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.short-desc {
|
||||
font-size: 9px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.content-date {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 0.85rem;
|
||||
padding-left: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.timeline-section {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.timeline-item:hover {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.year-label {
|
||||
font-size: 10px;
|
||||
top: calc(66.67% + 12px);
|
||||
}
|
||||
|
||||
.content-date {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.timeline-item:hover .year-label {
|
||||
font-size: 2.5rem;
|
||||
bottom: -30px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
27
nuxt-web/assets/styles/main.css
Normal file
27
nuxt-web/assets/styles/main.css
Normal file
@@ -0,0 +1,27 @@
|
||||
@import '@fancyapps/ui/dist/fancybox/fancybox.css';
|
||||
|
||||
@import './vendor/themify-icons.css';
|
||||
@import './vendor/flaticon.css';
|
||||
@import './vendor/bootstrap-3.3.4.css';
|
||||
@import './vendor/animate.css';
|
||||
@import './vendor/owl.carousel.css';
|
||||
@import './vendor/owl.theme.css';
|
||||
@import './vendor/owl.transitions.css';
|
||||
@import './vendor/slick.css';
|
||||
@import './vendor/slick-theme.css';
|
||||
@import './vendor/swiper.min.css';
|
||||
@import './vendor/odometer-theme-default.css';
|
||||
|
||||
@import './base/pro.css';
|
||||
@import './base/product.css';
|
||||
@import './base/solution.css';
|
||||
@import './base/style.css';
|
||||
@import './base/css.css';
|
||||
@import './base/style2.css';
|
||||
/* 暂不引入以下旧样式：依赖缺失的历史资源且当前 Nuxt 页面已自带实现
|
||||
@import './base/default.css';
|
||||
@import './base/component.css';
|
||||
@import './base/history.css';
|
||||
@import './base/navigation2.css';
|
||||
@import './base/timeline.css';
|
||||
*/
|
||||
Reference in New Issue
Block a user