update: footer width

281d5811 · DCloud_LXH · 977bb08c · 281d5811 · 977bb08c · 281d5811
3 changed file
--- a/docs/.vuepress/theme/components/Footer.vue
+++ b/docs/.vuepress/theme/components/Footer.vue
@@ -59,20 +59,22 @@
 				},
 				render: (h, { props }) => {
 					return props.list.map((footNavListItem, _index) =>
-						h('div', { class: 'footNavItem', key: footNavListItem.title || _index }, [
-							h('div', { class: 'navItemTitle' }, footNavListItem.title),
-							h('div', { class: 'navLine' }),
+						h('div', { staticClass: 'footNavItem', key: footNavListItem.title || _index }, [
+							h('div', { staticClass: 'navItemTitle' }, footNavListItem.title),
+							h('div', { staticClass: 'navLine' }),
 							h(
 								'div',
-								{ class: 'navItemDetailBox' },
+								{ staticClass: 'navItemDetailBox' },
 								footNavListItem.content.map((item, index) =>
 									h(
 										'a',
 										{
-											class: 'navItemDetail',
-											target: '_blank',
+											staticClass: 'navItemDetail',
 											key: item.url || index,
-											href: item.url,
+											attrs: {
+												target: '_blank',
+												href: item.url,
+											},
 										},
 										item.subTitle
 									)

--- a/docs/.vuepress/theme/styles/footer copy.styl
+++ b/docs/.vuepress/theme/styles/footer copy.styl
-$w3cColor = #007aff
-$html5Color = #fb6f18
-
-.footNav
-	width 90%
-	display flex
-	justify-content center
-
-/* 通用底部导航栏---移动端 */
-@media screen and (max-width $MQMobile)
-	#aboutusBox
-		max-height 650px
-
-
-	.footNavItem
-		margin-right 10px
-
-	.navLine
-		width 90%
-
-	.companyBox
-		flex-direction column
-		align-items center
-
-	.anbaoInfo
-		width 330px
-		text-align center
-		padding-bottom 30px
-
-	.companyInfo, .anbaoInfo
-		margin-left 0px
-
-	.beianBox
-		flex-direction column
-
-	.beian
-		margin 5px 0
-
-	.domainImgBox
-		display flex
-		flex-direction row
-		align-items center
-
-	.hbLogo
-		margin 40px 0 20px 0
-
-	.navItemDetail
-		width 100px
-		margin-right 0px
-
-	.navItemDetailBox
-		display flex
-		flex-direction row
-		flex-wrap wrap
-		align-items flex-start
-		justify-content flex-start
-
-	#moreInfo
-		flex-direction column
-		margin 20px 20px 0 20px
-
-/* 通用底部导航栏---ipad */
-@media screen and (min-width $MQMobile) and (max-width 1190px)
-	#footNavClassify
-		min-width 145px
-
-	.footNav
-		margin 30px 10px
-
-	#aboutusBox
-		flex-direction row
-		max-height 465px
-
-		.footNavItem
-			width 20%
-
-	.footNavItem
-		margin-right 5%
-
-	.navLine
-		width 70%
-
-	.beianBox
-		flex-direction column
-
-	.beian
-		margin 10px 0
-
-	.domainImgBox
-		display flex
-		flex-direction row
-		align-items center
-
-	.companyInfo, .anbaoInfo
-		margin-left 0px
-
-	.anbaoInfo
-		text-align center
-		padding-bottom 30px
-
-	.footNav
-		margin 0 20px
-
-	.navItemDetail
-		width 140px
-		margin-right 25px
-
-	.footNavItem
-		width 100%
-
-	.hbLogo
-		margin 50px 0 30px 0
-
-	#moreInfo
-		flex-direction column
-		margin 20px 20px 0 20px
-
-/* 小屏笔记本---pc */
-@media only screen and (min-width 1191px) and (max-width 1500px)
-	#footNavClassify
-		min-width 280px
-		margin-right 2%
-
-	#footNavBox
-		padding-bottom 45px
-
-	.footNav
-		margin 30px 10px
-		justify-content space-around
-
-	.footNavItem
-		margin-right 5%
-
-	.navLine
-		width 90%
-
-	.navItemDetailBox
-		max-height 285px
-
-	#aboutusBox
-		flex-direction row
-		width 70%
-
-		.footNavItem
-			width 20%
-
-	.companyInfo, .anbaoInfo
-		margin-left 20px
-
-	.beianBox
-		flex-direction row
-
-	.beian
-		margin 10px 0
-
-	.hbLogo
-		margin 50px 0 30px 0
-
-	.navItemDetail
-		width 140px
-
-	#moreInfo
-		flex-direction row
-		margin 5px 20px 0 20px
-
-/* 通用底部导航栏---pc */
-@media screen and (min-width 1501px)
-	#footNavClassify
-		width 20%
-		margin-right 20px
-		min-width 350px
-
-	#footNavBox
-		padding-bottom 45px
-
-	.footNav
-		margin 30px 10px
-
-	.footNavItem
-		margin-right 50px
-
-	.navLine
-		width 100%
-
-	.navItemDetailBox
-		max-height 285px
-
-	#aboutusBox
-		flex-direction column
-		width 80%
-		max-height 370px
-
-	.companyInfo, .anbaoInfo
-		margin-left 20px
-
-	.beianBox
-		flex-direction row
-
-	.beian
-		margin 10px 0
-
-	.hbLogo
-		margin 50px 0 30px 0
-
-	.navItemDetail
-		width 140px
-
-	#moreInfo
-		flex-direction row
-		margin 5px 20px 0 20px
-
-/* 通用底部导航栏---公共 */
-#footNavBox
-	display flex
-	flex-direction column
-	width 100%
-	flex-wrap wrap
-	/* justify-content left */
-	justify-content center
-	align-items center
-	margin-top 30px
-	background #fbfbfb
-	box-shadow #00000021 0px -20px 15px -15px
-
-	.w3c
-		text-decoration none
-		color $w3cColor !important
-		font-weight 800 !important
-
-	.html5
-		text-decoration none
-		color $html5Color !important
-		font-weight 800 !important
-
-	.hbLogo
-		display inline-block
-		width 160px
-		height 25px
-
-		background url('https//bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/d141de00-607f-11eb-8a36-ebb87efcf8c0.svg')
-			no-repeat center
-
-	.beianBox
-		display flex
-		align-items center
-
-		.domainImgBox
-			display flex
-			flex-direction row
-			align-items center
-
-			.domainImg
-				width 20px
-				height 20px
-				margin-left 20px
-				margin-right 5px
-
-		.beian
-			font-size 14px
-			text-decoration none
-			color $w3cColor !important
-			cursor pointer
-
-			&:hover
-				color #333333 !important
-				transition all 0.3s
-
-	.footNavItem
-		display flex
-		flex-direction column
-		align-items flex-start
-		margin-top 20px
-
-	.navLine
-		height 1px
-		background #e1e1e1
-		margin-bottom 15px
-
-	.navItemTitle
-		display flex
-		width 100px
-		height 35px
-		line-height 35px
-		font-size 16px
-		font-weight bold
-		font-family SourceHanSansCN-Regular serif
-		color #414141
-
-	.navItemDetail
-		display inline-block
-		cursor pointer
-		text-decoration none
-		color #3c3c3c !important
-		text-align left
-		margin-bottom 12px
-		font-size 14px
-		/* font-family CambayDevanagari arial,sans-serif */
-		font-family SourceHanSansCN-Regular serif
-		font-weight 400
-		line-height 22px
-
-	.navItemDetail:hover
-		color $accentColor !important
-		transition all 0.2s
-
-	.companyBox
-		display flex
-		justify-content center
-
-	.companyInfo, .anbaoInfo
-		font-size 14px
-		color #565656 !important
-		font-family SourceHanSansCN-Regular serif
-
-	.navItemDetailBox
-		width 100%
-		display flex
-		flex-direction column
-		flex-wrap wrap
-
-#aboutusBox
-	display flex
-	flex-wrap wrap
--- a/docs/.vuepress/theme/styles/footer.styl
+++ b/docs/.vuepress/theme/styles/footer.styl
@@ -8,16 +8,16 @@ $html5Color = #fb6f18

 /* 通用底部导航栏---公共 */
 #footNavBox
+	max-width $contentWidth
 	width 100%
-	margin-top 30px
-	padding-bottom 30px
+	margin 30px auto
 	display flex
 	flex-direction column
 	flex-wrap wrap
 	justify-content center
 	align-items center
 	background #fbfbfb
-	box-shadow #00000021 0px -20px 15px -15px
+	box-shadow rgba(0, 0, (0 / 6%), .06) 0px -20px 15px -15px

 	.w3c
 		text-decoration none