Bläddra i källkod

update code

master
guzhenfu 2 år sedan
förälder
incheckning
97f874e30b
8 ändrade filer med 245 tillägg och 42 borttagningar
  1. +12
    -0
      src/App.vue
  2. +9
    -0
      src/common.vue
  3. +8
    -18
      src/index.less
  4. +4
    -0
      src/main.js
  5. +1
    -0
      src/view/km.vue
  6. +209
    -24
      src/view/main/main.vue
  7. +1
    -0
      src/view/overview.vue
  8. +1
    -0
      src/view/people.vue

+ 12
- 0
src/App.vue Visa fil

@@ -7,7 +7,19 @@
<script>
export default {
name: 'App',
data(){
return{
}
},
mounted() {
//可用于设置自适应屏幕,根据获得的可视宽度(兼容性)判断是否显示
// let w = document.documentElement.offsetWidth || document.body.offsetWidth;
// console.log("this.$isPhone = true"+w)
// if(w < 1000){
// this.$isPhone = true
// }
// console.log("this.$isPhone ="+this.$isPhone)
},
metaInfo: {
title: "",


+ 9
- 0
src/common.vue Visa fil

@@ -0,0 +1,9 @@
<script type="text/javascript">
// 定义一些公共的属性和方法
const isPhone = (document.documentElement.offsetWidth ||
document.body.offsetWidth) < 1000
// 暴露出这些属性和方法
export default {
isPhone
}
</script>

+ 8
- 18
src/index.less Visa fil

@@ -1,14 +1,19 @@
body {
background: #F5F5F5 !important;
font-size: 12px;
box-sizing: border-box;
}

@media screen and (min-width: 769px) {
.main-container {
width: 1200px;
margin: 0 auto;
min-height: 500px;
}
}
@media screen and (min-device-width: 641px) and (max-device-width: 768px) {
.main-container {
width: 640px;
margin: 0 auto;
min-height: 500px;
}
@@ -16,7 +21,6 @@ body {
@media screen and (min-device-width: 401px) and (max-device-width: 640px) {
.main-container {
width: 640px;
margin: 0 auto;
min-height: 500px;
}
@@ -24,7 +28,6 @@ body {
@media only screen and (max-device-width: 400px) {
.main-container {
width: 640px;
margin: 0 auto;
min-height: 500px;
}
@@ -32,11 +35,7 @@ body {



.main-container {
width: 1200px;
margin: 0 auto;
min-height: 500px;
}

.main-container .breadcrumb{
margin-bottom: 10px;
font-size: 12px;
@@ -210,16 +209,7 @@ body {
background-color: #d3dce6;
}

.logo {
font-size: 20px;
font-weight: 900;
position: absolute;
margin-right: 100px;
left: -200px;
top: 0px;
text-align: center;
line-height: 50px;
}


.logo a, .logo a:hover {
color: #fff;


+ 4
- 0
src/main.js Visa fil

@@ -19,6 +19,9 @@ import 'element-ui/lib/theme-chalk/index.css';
import Toast from 'vue2-toast'
import Moment from 'moment'
import Meta from "vue-meta";
import global from './common.vue'


Vue.use(Meta);


@@ -28,6 +31,7 @@ Vue.use(Meta);
// })
Vue.prototype.$moment = Moment;//赋值使用
Vue.use(Toast)
Vue.prototype.COMMON = global
// import ElementUI from 'element-ui'
// import { ElementTiptapPlugin } from 'element-tiptap'


+ 1
- 0
src/view/km.vue Visa fil

@@ -207,6 +207,7 @@ export default {

changeType(index){
this.activeIndex = index;
this.isShow = false
this.getChannelInformationsRequest(this.titleList[index].id)
}


+ 209
- 24
src/view/main/main.vue Visa fil

@@ -1,11 +1,21 @@
<template>
<el-container>
<el-header class="header linear">
<el-menu :default-active="activeIndex" mode="horizontal" style="position: relative;padding-left: 100px;width: 960px;text-align: center;margin: 0 auto;border: none;background: transparent;overflow: visible">
<div class="logo">
<el-menu :default-active="activeIndex" mode="horizontal"
class="menu_class" v-if="!COMMON.isPhone"
>
<div class="logo" >
<img src="../../assets/images/logo.jpg" style="width: 300px; height: 60px;">
</div>
<el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item>
<el-menu-item
:key="index"
v-for="(item,index) in menuLists"
:route="item.path"
:index="item.index">
<router-link :to="item.path">{{item.text}}</router-link>
</el-menu-item>

<!-- <el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item>
<el-menu-item index="2"><router-link to="/about">关于我们</router-link></el-menu-item>
<el-menu-item index="3"><router-link to="/trode">行业动态</router-link></el-menu-item>
<el-menu-item index="4"><router-link to="/vip-service">会员服务</router-link></el-menu-item>
@@ -17,17 +27,59 @@
<el-menu-item index="9"><router-link to="/company">企业评估</router-link></el-menu-item>
<el-menu-item index="10"><router-link to="/people">人力发展</router-link></el-menu-item>
<el-menu-item index="11"><router-link to="/news">通知</router-link></el-menu-item>
<!-- <el-menu-item index="5"><router-link to="/news">新闻资讯</router-link></el-menu-item> -->
<el-menu-item index="12"><router-link to="/connect">联系我们</router-link></el-menu-item> -->

<!-- <el-menu-item index="7"><router-link to="/trode">行业动态</router-link></el-menu-item>
<!-- <el-menu-item index="5"><router-link to="/news">新闻资讯</router-link></el-menu-item>
<el-menu-item index="7"><router-link to="/trode">行业动态</router-link></el-menu-item>
<el-menu-item index="8"><router-link to="/exchange">合作交流</router-link></el-menu-item>
<el-menu-item index="10"><router-link to="/member">会员产品</router-link></el-menu-item> -->
<el-menu-item index="12"><router-link to="/connect">联系我们</router-link></el-menu-item>
<el-menu-item index="10"><router-link to="/member">会员产品</router-link></el-menu-item>
-->
</el-menu>

<div class="allSort" v-if="COMMON.isPhone">
<div class="sortMenu clearfix">
<ul class="sortMenu-ul" >
<li class="cell" v-for="(item, index) in menuLists" :key="index">
<router-link :to="item.path">{{item.text}}</router-link>
</li>
</ul>
</div>
</div>

<!-- <el-menu v-if="COMMON.isPhone">
<div class="m_logo" >
<img src="../../assets/images/logo.jpg" style="width: 300px; height: 60px;">
</div>
<el-submenu
style="float:left;"
class="right-item"
v-if="Object.keys(menuLists).length === 0?false:true"
index="10"
>
<template slot="title">
<i class="el-icon-s-fold" style="font-size:28px;color:#2d2d2d;"></i>
</template>
<el-menu-item
:key="key"
style="background-color: #fff;"
v-for="(item,key) in menuLists"
:index="item.index"
:route="item.activeIndex">
<router-link :to="item.path">{{item.text}}</router-link>
</el-menu-item>
</el-submenu>
</el-menu> -->

<!-- <el-footer style="height: 100px;flex: 0 0 auto;width: 100%" class="linear" v-if="COMMON.isPhone">
<div class="footer">
<div class="footer-bar">
<span @click="clickItem(index)"
v-for="(item, index) in menuLists" :key="index" >{{item.text}}</span>
</div>
</div>
</el-footer> -->

</el-header>
<router-view/>
<el-footer style="height: 100px;flex: 0 0 auto;width: 100%" class="linear">
@@ -79,18 +131,18 @@ export default {
isFullscreen: false,
height: 'height:'+((document.documentElement.clientHeight || document.body.clientHeight) - 50)+'px',
menuLists: [
{text: '首页', path: '/overview'},
{text: '关于我们', path: '/about'},
{text: '行业动态', path: '/trode'},
{text: '会员服务', path: '/vip-service'},
{text: '合作交流', path: '/exchange'},
{text: '产业研究', path: '/policy'},
{text: '统计分析', path: '/data'},
{text: '知识产权', path: '/km'},
{text: '企业评估', path: '/company'},
{text: '人力发展', path: '/people'},
{text: '通知', path: '/news'},
{text: '联系我们', path: '/connect'},
{text: '首页', path: '/overview', index:'1'},
{text: '关于我们', path: '/about', index:'2'},
{text: '行业动态', path: '/trode', index:'3'},
{text: '会员服务', path: '/vip-service', index:'4'},
{text: '合作交流', path: '/exchange', index:'5'},
{text: '产业研究', path: '/policy', index:'6'},
{text: '统计分析', path: '/data', index:'7'},
{text: '知识产权', path: '/km', index:'8'},
{text: '企业评估', path: '/company', index:'9'},
{text: '人力发展', path: '/people', index:'10'},
{text: '通知', path: '/news', index:'11'},
{text: '联系我们', path: '/connect', index:'12'},
]
}
},
@@ -129,7 +181,7 @@ export default {
]),
clickItem(index){
this.activeIndex = index + 1 + ""
this.$router.push(this.menuList[index].path)
this.$router.push(this.menuLists[index].path)
this.$forceUpdate()
},
turnToPage (route) {
@@ -244,7 +296,140 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 900;
position: absolute;
margin-right: 100px;
left: -200px;
top: 0px;
text-align: center;
line-height: 50px;
}
.m_logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 900;
position: absolute;
left: 50px;
top: 0px;
text-align: center;
line-height: 50px;
}

.el-submenu__title:hover{
background-color: transparent!important;
}

.menu_class{
padding-left: 100px!important;
width: 960px;
position: relative!important;
text-align: center;
margin: 0 auto!important;
border: none!important;
background-color: transparent!important;
overflow: visible
}

.el-menu{
background-color: transparent!important;
border-right: solid 1px transparent!important;
position: relative;
z-index: 10;
}

.sortMenu{
width: 100%;
background-color:transparent;
overflow-x: scroll;
-webkit-overflow-x: scroll;
}
.sortMenu::-webkit-scrollbar{
width: 0;
height: 0;
background-color: #fff;
}
.sortMenu-ul {
min-width:500px;
display: flex;
justify-content: flex-start;
}
.sortMenu .cell{
display: inline-block;
font-size: 12px;
margin: 0px 1em;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
text-overflow: ellipsis;
word-break: keep-all;
}
.sortMenu .cell.special a{
color: #ff474c;
}
.sortMenu .cell.special:before {
content: '';
height: 2px;
width: 100%;
background: #ff474c;
position: absolute;
bottom: 0px;
}
.sortMenu .all{
right: 0;
top: 0;
height: 35px;
width: 35px;
position: absolute;
background: #fff;
z-index: 10;
display: flex;
justify-content:center;
align-items:center;
}
.sortMenu .all:before{
content: '';
height: 25px;
width: 1px;
position: absolute;
box-shadow: 1px 0px 1px #e0e0e0;
left: 0px;
}
.sortMenu .all img{
display: block;
width: 16px;
}
.sortMenu .pull-down{
position: absolute;
top: 40px;
height:auto;
width: 100%;
background: #fff;
z-index: 1;
border-top: 1px solid #f2f2f2;
}
.pull-down-sort{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
align-content: space-around;
flex-wrap: wrap;
flex-direction: row
}
.pull-down-sort li{
float: left;
padding: .1rem
}
.pull-down-sort li a:hover{
color: #ff474c;
}


/* a{
color: #fff!important;


+ 1
- 0
src/view/overview.vue Visa fil

@@ -385,6 +385,7 @@ export default {
mounted() {
// this.getData()
this.getPositionRequest()
console.log("COMMON $isPhone:"+this.COMMON.isPhone)
}
}
</script>


+ 1
- 0
src/view/people.vue Visa fil

@@ -99,6 +99,7 @@ export default {

changeType(index){
this.activeIndex = index;
this.isShow = false
this.getChannelInformationsRequest(this.titleList[index].id)
}
},


Laddar…
Avbryt
Spara