Skip to content

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

“样式修改”

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