首页开发
This commit is contained in:
宋伟佳
Binary file not shown.
|
After Width: | Height: | Size: 599 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Vendored
+3
@@ -357,6 +357,9 @@ template {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
ul,li{
|
||||
padding:0;
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<!-- 我的动态 -->
|
||||
<template>
|
||||
<div class="dynamic">我的动态</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dynamic',
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dynamic {
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- 尾部链接 -->
|
||||
<template>
|
||||
<div calss="footer">
|
||||
<div class="link">
|
||||
<ul>
|
||||
<li><a href="http://www.sac.gov.cn/">国家标准化管理委员会</a></li>
|
||||
<li><a href="http://www.sac.gov.cn/">全国标准公共服务平台</a></li>
|
||||
@@ -30,18 +30,22 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
height: 40px;
|
||||
.link {
|
||||
height: 100%;
|
||||
ul {
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
li {
|
||||
flex: 1;
|
||||
}
|
||||
li:hover {
|
||||
color: blue;
|
||||
text-decorationn: underline;
|
||||
a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #e9ca32;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<!-- 资料中心 -->
|
||||
<template>
|
||||
<div class="information">资料中心</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Information',
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.information {
|
||||
}
|
||||
</style>
|
||||
@@ -70,11 +70,11 @@
|
||||
margin-bottom: 20px;
|
||||
.menu-item {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -90,9 +90,9 @@
|
||||
.menu-item {
|
||||
flex: 1;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<!-- 资讯 -->
|
||||
<template>
|
||||
<div class="realimeinfo">
|
||||
<ul>
|
||||
<li v-for="item in realimeinfoList" :key="item.id" class="time-title">
|
||||
<a class="title" :title="item.title">{{ item.title }}</a>
|
||||
<span class="time">{{ putTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Realimeinfo',
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {
|
||||
putTime: '',
|
||||
realimeinfoList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '资讯1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '资讯2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '资讯3',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '资讯4',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '资讯5',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '资讯6',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.getDate()
|
||||
},
|
||||
methods: {
|
||||
getDate() {
|
||||
//获取当前时间
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1
|
||||
var day = date.getDate()
|
||||
if (month < 10) {
|
||||
month = '0' + month
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
var nowDate = year + '-' + month + '-' + day
|
||||
this.putTime = nowDate
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.realimeinfo {
|
||||
.time-title {
|
||||
margin: 15px;
|
||||
.time {
|
||||
float: right;
|
||||
}
|
||||
a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #e9c851;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!-- 标准发布 -->
|
||||
<template>
|
||||
<div class="release">
|
||||
<ul>
|
||||
<li v-for="item in standardReleaseList" :key="item.id" class="time-title">
|
||||
<a class="title" :title="item.title">{{ item.title }}</a>
|
||||
<span class="time">{{ putTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Release',
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {
|
||||
putTime: '',
|
||||
standardReleaseList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '标准发布1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '标准发布2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '标准发布3',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '标准发布4',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '标准发布5',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '标准发布6',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.getDate()
|
||||
},
|
||||
methods: {
|
||||
getDate() {
|
||||
//获取当前时间
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1
|
||||
var day = date.getDate()
|
||||
if (month < 10) {
|
||||
month = '0' + month
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
var nowDate = year + '-' + month + '-' + day
|
||||
this.putTime = nowDate
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.release {
|
||||
.time-title {
|
||||
margin: 15px;
|
||||
.time {
|
||||
float: right;
|
||||
}
|
||||
a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #e9c851;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,20 +2,25 @@
|
||||
<template>
|
||||
<div class="search-group">
|
||||
<el-select
|
||||
v-model="selectkey"
|
||||
v-model="selectKey"
|
||||
class="search-group-item"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in jumppage"
|
||||
:key="item.selectkey"
|
||||
v-for="item in jumpPage"
|
||||
:key="item.selectKey"
|
||||
:label="item.label"
|
||||
:value="item.selectkey"
|
||||
:value="item.selectKey"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<div class="search-condition">
|
||||
<el-input type="text" placeholder="请输入关键词"></el-input>
|
||||
<el-input
|
||||
v-model="keywords"
|
||||
type="text"
|
||||
placeholder="请输入关键词"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-button class="primary_button" type="primary">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,26 +33,27 @@
|
||||
mixins: [],
|
||||
data() {
|
||||
return {
|
||||
selectkey: '',
|
||||
jumppage: [
|
||||
selectKey: '',
|
||||
keywords: '',
|
||||
jumpPage: [
|
||||
{
|
||||
selectkey: '选项1',
|
||||
selectKey: '选项1',
|
||||
label: '国内外标准法规',
|
||||
},
|
||||
{
|
||||
selectkey: '选项2',
|
||||
selectKey: '选项2',
|
||||
label: '研究报告',
|
||||
},
|
||||
{
|
||||
selectkey: '选项3',
|
||||
selectKey: '选项3',
|
||||
label: '企业标准',
|
||||
},
|
||||
{
|
||||
selectkey: '选项4',
|
||||
selectKey: '选项4',
|
||||
label: '动态&通知',
|
||||
},
|
||||
{
|
||||
selectkey: '选项5',
|
||||
selectKey: '选项5',
|
||||
label: '流程中心',
|
||||
},
|
||||
],
|
||||
@@ -62,20 +68,37 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-group {
|
||||
display: flex;
|
||||
width: 60vw;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
.search-group-item {
|
||||
margin-right: 10px;
|
||||
margin-right: 20px;
|
||||
::v-deep {
|
||||
.el-input__inner {
|
||||
background: transparent;
|
||||
width: 18vm;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-condition {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
::v-deep {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
}
|
||||
}
|
||||
}
|
||||
.primary_button {
|
||||
width: 8.2vw;
|
||||
height: 40px;
|
||||
background-color: #007dfe;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<!-- 标准征求意见 -->
|
||||
<template>
|
||||
<div class="solicitopinions">
|
||||
<ul>
|
||||
<li v-for="item in domesticDynamics" :key="item.id" class="time-title">
|
||||
<a class="title" :title="item.title">{{ item.title }}</a>
|
||||
<span class="time">{{ putTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Solicitopinions',
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {
|
||||
putTime: '',
|
||||
domesticDynamics: [
|
||||
{
|
||||
id: 1,
|
||||
title: '标准征求意见1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '标准征求意见2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '标准征求意见3',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '标准征求意见4',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '标准征求意见5',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '标准征求意见6',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.getDate()
|
||||
},
|
||||
methods: {
|
||||
getDate() {
|
||||
//获取当前时间
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1
|
||||
var day = date.getDate()
|
||||
if (month < 10) {
|
||||
month = '0' + month
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
var nowDate = year + '-' + month + '-' + day
|
||||
this.putTime = nowDate
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.solicitopinions {
|
||||
.time-title {
|
||||
margin: 15px;
|
||||
.time {
|
||||
float: right;
|
||||
}
|
||||
a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #e9c851;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,16 @@
|
||||
<!-- 待办任务 -->
|
||||
<template>
|
||||
<div class="to-do-list">待办任务</div>
|
||||
<div class="to-do-list">
|
||||
<div>
|
||||
<h3 class="task">待办任务</h3>
|
||||
<span class="more">MORE</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="item in toDoTaskList" :key="item.id" class="time-title">
|
||||
<a>{{ item.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -9,7 +19,22 @@
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
toDoTaskList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '标准制定流程1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '标准制定流程2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '标准制定流程3',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
@@ -21,7 +46,31 @@
|
||||
<style lang="scss" scoped>
|
||||
.to-do-list {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ddd;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
.task {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.more {
|
||||
float: right;
|
||||
margin: 15px 15px;
|
||||
&:hover {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.time-title {
|
||||
margin: 10px;
|
||||
}
|
||||
a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #e9c851;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+63
-27
@@ -3,7 +3,7 @@
|
||||
<div class="home">
|
||||
<div class="home_header">
|
||||
<div class="logo">
|
||||
<span class="logo_title">全球标准法规管理系统</span>
|
||||
<span class="logo_title"></span>
|
||||
</div>
|
||||
<div class="user_exit">
|
||||
<span class="user">当前登录人</span>
|
||||
@@ -13,15 +13,24 @@
|
||||
<div class="home_main">
|
||||
<div class="left_wrapper">
|
||||
<search-group></search-group>
|
||||
<div class="main-left-wrap">
|
||||
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
||||
<el-tab-pane class="tabtitle" label="资料中心" name="information">
|
||||
<information></information>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane calss="tabtitle" label="我的动态" name="dynamic">
|
||||
<dynamic></dynamic>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="main-tabs">
|
||||
<div class="main-left-wrap">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="home-tabs"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<el-tab-pane label="标准征求意见" name="solicitOpinions">
|
||||
<solicitOpinions></solicitOpinions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标准发布" name="release">
|
||||
<release></release>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="资讯" name="realTimeInfo">
|
||||
<realTimeInfo></realTimeInfo>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_wrapper">
|
||||
@@ -39,9 +48,10 @@
|
||||
|
||||
<script>
|
||||
import searchGroup from './components/searchGroup'
|
||||
import information from './components/information'
|
||||
import dynamic from './components/dynamic'
|
||||
import realTimeInfo from './components/realtimeinfo'
|
||||
import release from './components/release'
|
||||
import navMenu from './components/navMenu'
|
||||
import solicitOpinions from './components/solicitopinions'
|
||||
import todoList from './components/todoList'
|
||||
import Empennage from 'views/home/components/empennage'
|
||||
// import empennage from 'views/home/components/empennage'
|
||||
@@ -52,15 +62,16 @@
|
||||
Empennage,
|
||||
// empennage,
|
||||
searchGroup,
|
||||
information,
|
||||
dynamic,
|
||||
solicitOpinions,
|
||||
realTimeInfo,
|
||||
release,
|
||||
navMenu,
|
||||
todoList,
|
||||
},
|
||||
mixins: [],
|
||||
data() {
|
||||
return {
|
||||
activeName: 'information',
|
||||
activeName: 'solicitOpinions',
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@@ -75,18 +86,25 @@
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
height: 100%;
|
||||
padding: 2vh 6vw 0 6vw;
|
||||
background: $primary-bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.1vh 3.51vw 4.9vh;
|
||||
background: url('../../assets/images/home/BG.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.home_header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 9.1vh;
|
||||
margin-bottom: 2.7vh;
|
||||
.logo {
|
||||
width: 850px;
|
||||
height: 50px;
|
||||
width: 500px;
|
||||
height: 70px;
|
||||
background: url('../../assets/images/home/logo.png') no-repeat;
|
||||
.logo_title {
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
margin-left: 35%;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
line-height: 50px;
|
||||
@@ -115,27 +133,42 @@
|
||||
}
|
||||
.home_main {
|
||||
display: flex;
|
||||
height: 77vh;
|
||||
padding: 10px 0;
|
||||
margin-top: 16px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.left_wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 60vw;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ddd;
|
||||
.tabtitle {
|
||||
.home-tabs {
|
||||
margin-left: 2.34vw;
|
||||
::v-deep {
|
||||
.el-tabs__item {
|
||||
font-size: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-tabs {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 60vw;
|
||||
height: 67.7vh;
|
||||
margin-right: 10px;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
}
|
||||
}
|
||||
.right_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 550px;
|
||||
width: 32.2vw;
|
||||
height: 100%;
|
||||
}
|
||||
.search-condition {
|
||||
@@ -146,7 +179,10 @@
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 40px;
|
||||
height: 5.2vh;
|
||||
margin-top: 1.3vh;
|
||||
line-height: 5.2vh;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user