Skip to content

W
web-site
Commit c8078585 authored by zhangdong's avatar zhangdong
Browse files
Options

“样式修改”

parent 55b8c24e
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 185 deletions
components/footer.vue
View file @ c8078585
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
<div> <div>
<div class="footer"> <div class="footer">
<div class="footList content"> <div class="footList content">
<div v-for="(item,index) in footList" :key="index"> <div v-for="(item, index) in footList" :key="index">
<div class="t4">{{item.title}}</div> <div class="t4">{{ item.title }}</div>
<ul> <ul>
<li class="t1" v-for="(item,index) in item.list" :key="index"> <li class="t1" v-for="(item, index) in item.list" :key="index">
<span class="textcolor" @click="xxxxmove(item.url)">{{item.name}}</span> <span class="textcolor" @click="xxxxmove(item.url)">{{
item.name
}}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -18,87 +20,105 @@ ...@@ -18,87 +20,105 @@
</div> </div>
</template> </template>
<script> <script>
import {getMessagephone} from '@/common/list.js' import { getMessagephone } from "@/common/list.js";
export default { export default {
mounted(){ mounted() {
getMessagephone().then(res => { getMessagephone().then((res) => {
this.footList[3].list[0].name=`客服联系电话 : ${res.data.phone}` this.footList[3].list[0].name = `客服联系电话 : ${res.data.phone}`;
this.footList[3].list[1].name=`电子邮箱 : ${res.data.email}` this.footList[3].list[1].name = `电子邮箱 : ${res.data.email}`;
}); });
}, },
methods:{ methods: {
xxxxmove(url){ xxxxmove(url) {
this.$router.push(url); this.$router.push(url);
}
}, },
data() { },
return { data() {
/* email:'605664467@qq.com', */ return {
footList: [{ /* email:'605664467@qq.com', */
title: "友情链接", footList: [
list: [{name:'教育部学校规划建设发展', {
url:'https://www.csdp.edu.cn/index.aspx?AspxAutoDetectCookieSupport=1' title: "友情链接",
}, list: [
{ {
name:'北京市教委', name: "教育部学校规划建设发展",
url:'http://jw.beijing.gov.cn/' url:
"https://www.csdp.edu.cn/index.aspx?AspxAutoDetectCookieSupport=1",
}, },
{ {
name:'全国农产品批发市场价格信息网', name: "北京市教委",
url:'http://pfscnew.agri.gov.cn/' url: "http://jw.beijing.gov.cn/",
} },
], {
}, name: "全国农产品批发市场价格信息网",
{ url: "http://pfscnew.agri.gov.cn/",
title: "关于我们", },
list: [{name:"诚招英才",url:'/message/news?id=126'}, {name:"联系我们",url:'/message/news?id=126'}] ],
}, },
{ {
title: "客服中心", title: "关于我们",
list: [{name:"帮助中心",url:'/message/news?id=127'}, {name:"在线客服",url:'/message/news?id=127'}] list: [
}, { name: "诚招英才", url: "/message/news?id=126" },
/* */ { name: "联系我们", url: "/message/news?id=126" },
{ ],
title: "联系方式", },
list: [{name:"客服联系电话 : "}, {name:"电子邮箱: "},] {
}, title: "客服中心",
] list: [
} { name: "帮助中心", url: "/message/news?id=127" },
} { name: "在线客服", url: "/message/news?id=127" },
} ],
},
/* */
{
title: "联系方式",
list: [{ name: "客服联系电话 : " }, { name: "电子邮箱: " }],
},
],
};
},
};
</script> </script>
<style> <style>
.footList { .footList {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.footer {
margin-top: 0.6rem;
width: 100%;
box-sizing: border-box;
padding: 0.3rem 0 0.2rem;
/* border-top: .01rem solid #D6D6D6; */
border-bottom: 0.01rem solid #e4e7ed;
background: #f7f8fa;
}
.t4 {
margin-bottom: 0.36rem;
}
.footer { ul > .t1 {
width: 100%; margin-bottom: 0.24rem;
box-sizing: border-box;
padding-top: 6%;
padding-bottom: 0.39rem;
/* border-top: .01rem solid #D6D6D6; */
/* border-bottom: .01rem solid #D6D6D6; */
}
.t4 { color: #323232;
margin-bottom: 0.36rem; }
text-align: center; .copyright {
} height: 0.39rem;
font-size: 0.16rem;
color: rgba(153, 153, 153, 1);
ul>.t1 { background: #f7f8fa;
margin-bottom: 0.39rem; }
text-align: center; .copyright > div {
color: #323232 font-size: 0.12rem;
} font-family: MicrosoftYaHei;
.copyright{ color: #999999;
height:.61rem; }
font-size:.16rem; .textcolor {
color:rgba(153,153,153,1); color: #323232;
} }
.textcolor{
color: #323232
}
</style> </style>
components/header.vue
View file @ c8078585
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
</div> </div>
<div class="welcome t1"> <div class="welcome t1">
<el-dropdown size="mini"> <el-dropdown size="mini">
<span class="text textr">{{userName}}<i class="el-icon-arrow-down el-icon--right" v-if="isicon"></i> </span> <span class="text textr" style=" color:#969799">{{userName}}<i class="el-icon-arrow-down el-icon--right" v-if="isicon"></i> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<div v-if="isicon" size="mini" class="checkButton " @click="out">退出</div> <div v-if="isicon" size="mini" class="checkButton " @click="out">退出</div>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<!-- <div class="checkout" v-show = "showButton" @mouseover="hover()">退出</div> --> <!-- <div class="checkout" v-show = "showButton" @mouseover="hover()">退出</div> -->
<nuxt-link to="/login/user" class="login textr" v-show="showDefault">登录</nuxt-link> <nuxt-link to="/login/user" class="login textr" v-show="showDefault">登录</nuxt-link>
<span style="color:blue;margin-left:30px" class="other textr" @click="loginOther" v-show="showDefault">商家免费入驻</span> <span style="color:#0486FE;margin-left:.15rem" class="other textr" @click="loginOther" v-show="showDefault">商家免费入驻</span>
</div> </div>
</div> </div>
<div class="flex-item t1 collection"> <div class="flex-item t1 collection">
...@@ -49,7 +49,7 @@ import url from "@/assets/js/url.js" ...@@ -49,7 +49,7 @@ import url from "@/assets/js/url.js"
return { return {
isicon:false, isicon:false,
input: '', input: '',
userName:'欢迎来到易优采,请', userName:'欢迎来到易优采，请',
showDefault: true, showDefault: true,
/* showButton:false */ /* showButton:false */
} }
...@@ -105,7 +105,7 @@ import url from "@/assets/js/url.js" ...@@ -105,7 +105,7 @@ import url from "@/assets/js/url.js"
.header-line { .header-line {
/* margin-top: .9rem; */ /* margin-top: .9rem; */
width: 100%; width: 100%;
height: .50rem; height: .30rem;
background: rgba(245, 245, 245, 1); background: rgba(245, 245, 245, 1);
border: 1px solid rgba(225, 225, 225, 1); border: 1px solid rgba(225, 225, 225, 1);
display: flex; display: flex;
...@@ -130,7 +130,7 @@ import url from "@/assets/js/url.js" ...@@ -130,7 +130,7 @@ import url from "@/assets/js/url.js"
.collection>img { .collection>img {
width: .16rem; width: .16rem;
height: .16rem; height: .16rem;
margin: 0 .62rem 0 .2rem; margin-left:.15rem;
} }
.head-title { .head-title {
...@@ -169,6 +169,7 @@ import url from "@/assets/js/url.js" ...@@ -169,6 +169,7 @@ import url from "@/assets/js/url.js"
} }
.textr{ .textr{
font-size:12px; font-size:12px;
line-height:.50rem line-height:.50rem;
} }
</style> </style>
components/homeinput.vue
View file @ c8078585
<template> <template>
<div class="head-input flex-center"> <div class="head-input flex-center">
<div class=" content flex-between"> <div class="content flex-between">
<div class=" images flex"> <div class="images flex">
<img src="~/assets/css/logo.jpg" > <img src="~/assets/css/logo.jpg" >
<div class="head-input-title" @click="gotohome">易优采</div> <div class="head-input-title" @click="gotohome">易优采</div>
</div> </div>
<div class="search flex-item"> <div class="search">
<div class="flex"> <div class="flex">
<el-input <el-input
placeholder="请输入您要搜索的公告" placeholder="请输入您要搜索的公告"
...@@ -63,9 +63,13 @@ import Cookies from "js-cookie" ...@@ -63,9 +63,13 @@ import Cookies from "js-cookie"
} }
.head-input{ .head-input{
height: 100px; width:12rem;
width:1200px; margin:0 auto;
margin:0 auto margin-top:.25rem;
margin-bottom:.15rem
}
.search{
width:4.59rem
} }
.search>.search-title{ .search>.search-title{
width:.74rem; width:.74rem;
...@@ -104,9 +108,9 @@ import Cookies from "js-cookie" ...@@ -104,9 +108,9 @@ import Cookies from "js-cookie"
background-color: #FF5203; background-color: #FF5203;
color: #FFFFFF color: #FFFFFF
} }
易优采{ /* 易优采{
border:1px solid #FF5203 border:1px solid #FF5203
} } */
.el-input__inner:focus{ .el-input__inner:focus{
border:1px solid #FF5203 border:1px solid #FF5203
} }
......
components/nav.vue
View file @ c8078585
<template> <template>
<div class="nav"> <div class="nav">
<div class="nav-list content flex"> <div class="nav-list content flex-between">
<div class="nav-sty" :to="item.to" tag="div" :class="index==nav?'active':''" v-for="(item,index) in linklist" :key="index" <div class="nav-sty" :to="item.to" tag="div" :class="index==nav?'active':''" v-for="(item,index) in linklist" :key="index"
@click="change(index,item.to)">{{item.name}}</div> @click="change(index,item.to)">{{item.name}}</div>
</div> </div>
...@@ -180,19 +180,20 @@ import inDex from '@/pages/index.vue' ...@@ -180,19 +180,20 @@ import inDex from '@/pages/index.vue'
} }
.nav { .nav {
width: 100%; width: 100%;
border-bottom: .05rem solid #D6D6D6; border-bottom: .01rem solid #E3E3E6
} }
.nav-list>div { .nav-list>div {
font-size: .16rem; font-size: .16rem;
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
padding: 0.2rem 0.5rem; width: 1.14rem;
margin-right: .2rem; padding: 0.12rem 0rem;
text-align: center;
font-weight: bold;
} }
.nav-list>.active { .nav-list>.active {
color: rgba(255, 255, 255, 1); color: #FB5133;
border-bottom:.03rem solid #FB5133
background: #FF5203;
} }
</style> </style>
pages/index/index.vue
View file @ c8078585
<template> <template>
<div class="homepage"> <div class="homepage">
<div class="content"> <div class="message" style="padding-top: 0.2rem; margin-bottom: 0.6rem">
<div class="banner"> <div class="banner">
<el-carousel trigger="click" height="5.3rem" width="100%"> <el-carousel trigger="click" height="4.2rem" width="9.2rem">
<el-carousel-item <el-carousel-item
v-for="(item, index) in picArr" v-for="(item, index) in picArr"
:key="index" :key="index"
...@@ -13,28 +13,27 @@ ...@@ -13,28 +13,27 @@
</el-carousel> </el-carousel>
<!-- <img src="~/assets/images/back.png" style="height:5.3rem;width:100%"> --> <!-- <img src="~/assets/images/back.png" style="height:5.3rem;width:100%"> -->
</div> </div>
<div class="loginbox"> <div class="login">
<div class="login"> <div class="block">登录</div>
<div class="author"> <div class="author">
<img src="~/assets/css/user.png" /> <img src="~/assets/css/user.png" />
</div> </div>
<div class="login-title">{{ userName }}</div> <div class="login-title">{{ userName }}</div>
<div class="login-button t10" @click="loginuser" v-show="showDefault"> <div class="login-button t10" @click="loginuser" v-show="showDefault">
用户登录 用户登录
</div> </div>
<div class="login-button t11" @click="Merchant" v-show="showDefault"> <div class="login-button t11" @click="Merchant" v-show="showDefault">
商家入驻 商家入驻
</div> </div>
<div class="login-button" v-show="!showDefault" @click="pushH"> <div class="login-button" v-show="!showDefault" @click="pushH">
管理后台 管理后台
</div> </div>
<div class="flex" style="margin-top: 0.2rem"> <div class="flex" style="margin-top: 0.14rem">
<span v-show="showDefault">还没有账号?</span> <span v-show="showDefault" style="font-size: 0.12rem"
<span class="font" @click="reg" v-show="showDefault"> >还没有账号?</span
我要注册</span >
> <span class="font" @click="reg" v-show="showDefault"> 我要注册</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,10 +43,13 @@ ...@@ -44,10 +43,13 @@
:key="index" :key="index"
class="message-item" class="message-item"
> >
<div class="t12">{{ item.head }}</div> <div class="flex-item t12">
<div>{{ item.head }}</div>
<div class="t13">Base direct supply zone</div>
</div>
<div> <div>
<img style="border-top: 2px solid #d8d8d8" :src="item.src" alt="" /> <img :src="item.src" alt="" />
<div style="margin-top: 30px"> <div style="margin-top: 0.2rem" class="content">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ "" + item.title }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ "" + item.title }}
</div> </div>
</div> </div>
...@@ -66,8 +68,9 @@ ...@@ -66,8 +68,9 @@
v-show="index < 5" v-show="index < 5"
class="flex-between list-con" class="flex-between list-con"
> >
<div @click="linkTo2(item.id)" class="newsSty"> <div @click="linkTo2(item.id)" class="flex-item">
{{ item.title }} <div class="yuan"></div>
<div class="newsSty">{{ item.title }}</div>
</div> </div>
<div class="time">{{ item.createTime.slice(0, 10) }}</div> <div class="time">{{ item.createTime.slice(0, 10) }}</div>
</li> </li>
...@@ -85,8 +88,9 @@ ...@@ -85,8 +88,9 @@
v-show="index < 5" v-show="index < 5"
class="flex-between list-con" class="flex-between list-con"
> >
<div @click="linkTo1(item.id)" class="newsSty"> <div @click="linkTo1(item.id)" class="flex-item">
{{ item.title }} <div class="yuan"></div>
<div class="newsSty">{{ item.title }}</div>
</div> </div>
<div class="time">{{ item.createTime.slice(0, 10) }}</div> <div class="time">{{ item.createTime.slice(0, 10) }}</div>
</li> </li>
...@@ -104,13 +108,15 @@ ...@@ -104,13 +108,15 @@
v-show="index < 5" v-show="index < 5"
class="flex-between list-con" class="flex-between list-con"
> >
<div @click="linkTo(item.id)" class="newsSty">{{ item.title }}</div> <div @click="linkTo(item.id)" class="flex-item">
<div class="yuan"></div>
<div class="newsSty">{{ item.title }}</div>
</div>
<div class="time">{{ item.createTime.slice(0, 10) }}</div> <div class="time">{{ item.createTime.slice(0, 10) }}</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- <div class="content cooperation"> <!-- <div class="content cooperation">
<div class="cooperation-title t3">合作平台</div> <div class="cooperation-title t3">合作平台</div>
<div class="flex-between"> <div class="flex-between">
...@@ -342,26 +348,22 @@ export default { ...@@ -342,26 +348,22 @@ export default {
<style scoped> <style scoped>
.carousel-item { .carousel-item {
width: 100%; width: 9.2rem;
height: 5.3rem; height: 4.2rem;
background: white;
object-fit: cover; object-fit: cover;
/* display: flex;
justify-content: center; */
} }
.src-img { .src-img {
cursor: pointer; cursor: pointer;
/* background-size: cover; */ width: 9.2rem;
width: 100%; height: 4.2rem;
height: 5.3rem; object-fit:cover;
object-fit: cover;
} }
.banner { .banner {
width: 100%; width: 9.2rem;
height: 4.21rem; height: 4.21rem;
} }
.el-carousel__item h3 { /* .el-carousel__item h3 {
color: #475669; color: #475669;
font-size: 14px; font-size: 14px;
opacity: 0.75; opacity: 0.75;
...@@ -375,25 +377,33 @@ export default { ...@@ -375,25 +377,33 @@ export default {
.el-carousel__item:nth-child(2n + 1) { .el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6; background-color: #d3dce6;
} } */
.login { .login {
width: 2.6rem; width: 2.6rem;
height: 3.28rem; height: 4.2rem;
border: 0.01rem solid rgba(220, 220, 220, 1); border: 0.01rem solid rgba(220, 220, 220, 1);
padding-bottom: 0.2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: absolute; position: absolute;
/* left:1040px; /* left:1040px;
top:214px; */ top:214px; */
top: -3.1rem; top: 0.2rem;
right: 0; right: 0;
background: #ffffff; background: #ffffff;
z-index: 9999; z-index: 9999;
} }
.login > .block {
width: 100%;
height: 0.45rem;
background: #fb5133;
border-radius: 0.05rem 0.05rem 0px 0px;
text-align: center;
color: #ffffff;
font-size: 0.16rem;
line-height: 0.45rem;
}
.login > .login-button { .login > .login-button {
width: 1.91rem; width: 1.91rem;
height: 0.34rem; height: 0.34rem;
...@@ -418,56 +428,63 @@ export default { ...@@ -418,56 +428,63 @@ export default {
} }
.login > .author { .login > .author {
margin-top: 0.2rem; margin-top: 0.42rem;
width: 0.6rem; width: 0.6rem;
height: 0.6rem; height: 0.6rem;
border-radius: 50%; border-radius: 50%;
} }
.login > .login-title { .login > .login-title {
font-size: 0.16rem;
font-weight: 300;
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
margin: 0.3rem 0 0.53rem 0; margin: 0.2rem 0 0.3rem 0;
font-size: 0.16rem;
font-weight: bold;
} }
.message { .message {
padding-top: 1rem; padding-top: 0.1rem;
width: 12rem; width: 12rem;
margin: 0 auto; margin: 0 auto;
position: relative;
} }
.message-item { .message-item {
margin-bottom: 0.2rem; margin-bottom: 0.5rem;
} }
.message-item > div > img { .message-item > div > img {
width:/* 8.80rem; */ 12rem; width:/* 8.80rem; */ 12rem;
height: /* 5.40rem; */ 5.2rem; height: /* 5.40rem; */ 4.28rem;
/* margin:0 auto */ /* margin:0 auto */
object-fit: cover; object-fit: cover;
} }
.message-item > div > div { .message-item > div > .content {
width: 12rem; width: 12rem;
height: 0.76rem; color: #4c4c4c;
border: 1px solid rgba(220, 220, 220, 1); font-size: 0.16rem;
font-weight: 400;
line-height: 0.24rem;
letter-spacing: 0.01rem;
} }
.dynamic-item { .dynamic-item {
width: 3.88rem; width: 3.9rem;
height: 2.78rem; height: 3.09rem;
border: 1px solid rgba(151, 152, 153, 1); border: 1px solid #d9dadb;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0.05rem;
/* padding: 0.2rem; */ /* padding: 0.2rem; */
margin-top: 0.4rem; /* margin-top: 0.4rem; */
} }
.dynamic-item .col { /* .dynamic-item .col {
background: linear-gradient(180deg, #ffffff 0%, #dfdfdf 100%); background: linear-gradient(180deg, #ffffff 0%, #dfdfdf 100%);
} } */
.dynamic-item > div { .dynamic-item > div {
padding-bottom: 0.12rem;
border-bottom: 1px solid rgba(228, 231, 237, 1); border-bottom: 1px solid rgba(228, 231, 237, 1);
padding: 0.2rem; margin: 0 0.2rem;
height: 0.57rem;
line-height: 0.57rem;
} }
.dynamic-item .more { .dynamic-item .more {
...@@ -475,13 +492,12 @@ export default { ...@@ -475,13 +492,12 @@ export default {
} }
.dynamic-item > ul { .dynamic-item > ul {
margin-top: 0.12rem; margin-top: 0.19rem;
padding: 0.2rem; padding: 0.2rem;
padding-top: 0.05rem; padding-top: 0rem;
} }
.dynamic-item > ul > li { .dynamic-item > ul > li {
margin-bottom: 0.2rem; margin-bottom: 0.25rem;
} }
.dynamic-item > ul > li > div { .dynamic-item > ul > li > div {
...@@ -513,13 +529,19 @@ export default { ...@@ -513,13 +529,19 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 2rem; width: 2rem;
position: relative;
}
.col > .t3 {
font-weight: bold;
font-size: 0.18rem;
} }
.time { .time {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 0.69rem; /* width: 0.69rem; */
height: 0.16rem; /* height: 0.16rem; */
} }
.homepage { .homepage {
width: 100%; width: 100%;
...@@ -528,40 +550,42 @@ export default { ...@@ -528,40 +550,42 @@ export default {
width: 100%; width: 100%;
} }
.font { .font {
color: #ff5203; color: #f24b30;
cursor: pointer; cursor: pointer;
margin-left: 0.1rem;
font-size: 0.12rem;
} }
.login .t10 { .login .t10 {
width: 1.91rem; width: 1.91rem;
height: 0.34rem; height: 0.34rem;
background-color: #ff5203; background-color: #ff5203;
border-radius: 0.03rem; border-radius: 0.03rem;
/* border: 1px solid #0486FE; */ font-size: 0.14rem;
color: white; color: #fff;
} }
.login .t11 { .login .t11 {
width: 1.91rem; width: 1.91rem;
height: 0.34rem; height: 0.34rem;
background-color: #ff5203; background-color: #fff;
border-radius: 0.03rem; border-radius: 0.03rem;
opacity: 0.31; font-size: 0.14rem;
color: #ffffff; color: #fb5133;
border: 1px solid #fb5133;
} }
.contentList { .contentList {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.t12 { .t12 {
margin-top: 0.5rem;
padding-left: 0.2rem; padding-left: 0.2rem;
border-left: 4px solid #ff5203; border-left: 4px solid #ff5203;
margin-bottom: 0.2rem; margin-bottom: 0.4rem;
/* width: 1.11rem; */ font-size: 0.24rem;
height: 0.24rem;
font-size: 0.18rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #ff5203; color: #000000;
line-height: 0.24rem; font-weight: bold;
position: relative;
letter-spacing: 0.02rem;
} }
.loginbox { .loginbox {
width: 12rem; width: 12rem;
...@@ -569,4 +593,17 @@ export default { ...@@ -569,4 +593,17 @@ export default {
position: relative; position: relative;
z-index: 99999; z-index: 99999;
} }
.t13 {
font-size: 0.12rem;
letter-spacing: 0;
color: #666666;
margin-left: 0.13rem;
}
.list-con .yuan {
width: 0.04rem;
height: 0.04rem;
border-radius: 50%;
background: #ff5203;
margin-right: 0.1rem;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment