Skip to content

G
gs1
Commit a83e4985 by 林家欣
Options

修改搜索页文本框提示文案颜色

parent 0574095d
Showing with 196 additions and 88 deletions
src/assets/css/_mixin.scss
......@@ -291,7 +291,7 @@
border-color: $borderColor;
}
&::placeholder {
color: $placeholderColor;
color: $placeholderColor !important;
}
}
.el-input__icon {
......@@ -332,6 +332,50 @@
}
}
@mixin elDateTimeRange {
.el-date-editor--datetimerange {
&.el-input__inner {
width: 100%;
display: flex;
align-items: center;
height: calcvh(33);
line-height: calcvh(33);
}
}
.el-input__icon {
color: #00ffff;
height: auto;
}
}
@mixin elDate($height: calcvh(33), $color: #00ffff, $placeholderColor: #00ffff) {
.el-date-editor {
&.el-input {
width: 100%;
height: $height;
}
.el-range-input {
background: none;
color: $color;
flex: 1;
font-size: calcvw(14);
&::placeholder {
color: $placeholderColor;
}
}
.el-range-separator {
color: $color;
display: flex;
align-items: center;
width: auto;
font-size: calcvw(14);
}
.el-input__icon {
color: $color;
}
}
}
// 超宽显示省略号
@mixin ellipsis {
overflow: hidden;
......
src/views/Home/comps/sousuo-list.vue
......@@ -2,7 +2,7 @@
<ul class="sousuoList">
<li v-for="(tmp, i) in 10" :key="i">
<div class="sousuoList-top">
<span>【新闻资讯】山东省条码印刷品质量检验站通过</span>
<span>【资讯动态】山东省条码印刷品质量检验站通过</span>
<span>CNAS评审组现场评审</span>
</div>
<div class="sousuoList-middle">中国合格评定国家认可委员会（CNAS）派遣2名评审员组成评审组就所申请一维条码符号、二维条码符号、行业应用软件、移动智能终端应用软件和移动智能终端应用软件（个人信息安全保护…</div>
......
src/views/Home/sousuo.vue
......@@ -3,7 +3,11 @@
<div class="sousuo-top">
<div class="container">
<div class="sousuo-top-form">
<el-input placeholder="请输入内容" clearable></el-input>
<el-input
placeholder="请输入内容"
clearable
v-model="search.keywords"
></el-input>
<div class="top-form-btn">
<img src="../../assets/image/home/sousuo-ico1.png" alt="" />
</div>
......@@ -43,7 +47,7 @@
aria-controls="profile"
aria-selected="false"
>
<span>新闻资讯</span>
<span>资讯动态</span>
</button>
</li>
</ul>
......@@ -69,7 +73,11 @@
aria-labelledby="home-tab"
>
<sousuoList />
<pages />
<pages
:currPage="pageParams.currPage"
:pageSize="pageParams.pageSize"
:total="pageParams.total"
/>
</div>
<div
class="tab-pane fade"
......@@ -95,6 +103,14 @@ export default {
},
data() {
return {
search: {
keywords: "",
},
pageParams: {
currPage: 1,
pageSize: 10,
total: 0,
},
pickerOptions: {
shortcuts: [
{
......@@ -133,12 +149,16 @@ export default {
<style lang="scss">
.sousuo {
.sousuo-top-form {
@include elInput(50px, #414345, #414345, #fff, #cfdcea);
@include elInput(50px, #333, #666, #fff, #cfdcea);
.el-input__inner {
border-right: 0;
border-radius: 4px 0 0 4px;
}
}
.sousuo-bottom {
@include elDateTimeRange;
@include elDate(32px, #333, #666);
}
@media screen and(min-width: 992px) {
.sousuo-top-form {
.el-input {
......
src/views/Service/Partners/caseList.vue
<template>
<div class="search-content n-service partners-case-list">
<div class="title">GS1标准服务提供商案例</div>
<div class="body" style="padding-top: 9px;position: relative;">
<div class="search row" style="margin: 15px 0;">
<div class="body" style="padding-top: 9px; position: relative">
<div class="search row" style="margin: 15px 0">
<div class="col-lg-4">
<el-select style="width: 100%" size="small" v-model="search.service" placeholder="请选择">
<el-select
style="width: 100%"
size="small"
v-model="search.service"
placeholder="请选择"
>
<el-option
v-for="item in serviceList"
:key="item.value"
:label="item.value"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="col-lg-4 text-left">
<el-button type="primary" size="small">搜索</el-button>
<el-button type="primary" size="small" @click="casesFrontList"
>搜索</el-button
>
</div>
<ul class="main-list">
<!-- 注意！这里请后台开发的同学替换成循环输出 top 20 -->
<li><a target="_blank" href="/Service/Partners/Case?id=5">
宁波天益医疗GS1-UDI项目案例介绍-上海路歌信息技术有限公司</a></li>
<li><a target="_blank" href="/Service/Partners/Case?id=4">
北京爱康医疗GS1-UDI项目案例介绍-上海敖维计算机科技发展有限公司</a></li>
<li><a target="_blank" href="/Service/Partners/Case?id=3">
利用GS1编码规则实施UDI满足中国法规要求，实现内部追溯</a></li>
<li><a target="_blank" href="/Service/Partners/Case?id=2">
多米诺集团在医疗领域的GS1标准应用案例</a></li>
<li><a target="_blank" href="/Service/Partners/Case?id=1">
北京爱创科技股份有限公司进口药品GS1应用案例</a></li>
<li v-for="(tmp, i) in list" :key="i" @click="handelJumpMsg(tmp)">
<a> {{ tmp.title }}</a>
</li>
</ul>
<pages
:currPage="pageParams.currPage"
......@@ -49,6 +45,7 @@
</template>
<script>
import { mapMutations } from "vuex";
import pages from "../../comps/pages2.vue";
export default {
......@@ -65,13 +62,37 @@ export default {
search: {
service: "全部服务行业",
},
serviceList: [{value: '全部服务行业'}, {value: '医疗'}, {value: '零售'}, {value: '电子商务'}, {value: '食品烟酒'}, {value: '物流'}, {value: '服装'}, {value: '快速消费品'}, {value: '消费电子产品'}, {value: '制造和零部件'}, {value: '建材'}, {value: '其他'},]
}
serviceList: [
{ value: "全部服务行业" },
{ value: "医疗" },
{ value: "零售" },
{ value: "电子商务" },
{ value: "食品烟酒" },
{ value: "物流" },
{ value: "服装" },
{ value: "快速消费品" },
{ value: "消费电子产品" },
{ value: "制造和零部件" },
{ value: "建材" },
{ value: "其他" },
],
list: [],
};
},
created() {
this.casesFrontList();
},
methods: {
...mapMutations("service", {
setPartnersMsg: "setPartnersMsg",
}),
// 点击列表跳转详情
handelJumpMsg(msg) {
this.setPartnersMsg(msg);
this.$router.push({
path: "/Service/Partners/content",
});
},
// 接收分页子组件传过来的值
receivePagesChild(val) {
this.pageParams.currPage = val;
......@@ -91,6 +112,8 @@ export default {
console.log(serviceCasesFrontListRes, "serviceCasesFrontListRes");
if (success) {
console.log(data, "案例介绍");
this.pageParams.total = data.totalCount;
this.list = data.list;
}
},
},
......@@ -116,7 +139,7 @@ export default {
display: inline-block;
font-size: 16px;
font-weight: 500;
color: #F26335;
color: #f26335;
margin: 10px 0;
}
......@@ -126,7 +149,7 @@ export default {
}
}
.main-list{
.main-list {
padding-left: 40px;
}
......@@ -154,6 +177,5 @@ export default {
.main-list li:hover {
background-color: #eee;
}
}
</style>
src/views/Service/Partners/content.vue
<template>
<div class="search-content n-service partners-case">
<div class="body" style="padding-top: 9px;position: relative;">
<div class="msg-cont">
<div class="container">
<div class="msg-title">
{{ partnersMsg.title }}
</div>
<div class="msg-head">
<div class="msg-head-left">
<span>作者：{{ partnersMsg.auditor }}</span>
<span>日期：{{ partnersMsg.updatedate }}</span>
<span>编辑：{{ partnersMsg.editor }}</span>
</div>
</div>
<div class="msg-text" v-html="partnersMsg.brief"></div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import { mapState } from "vuex";
export default {
computed: {
...mapState('service', {
partnersMsg: 'partnersMsg',
...mapState("service", {
partnersMsg: "partnersMsg",
}),
},
created() {
console.log('TODO QUERY',this.$route.query, this.partnersMsg);
console.log("TODO QUERY", this.$route.query, this.partnersMsg);
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{name: "服务中心", path: "/Service/BarcodeV"},
{name: "标准服务提供商", path: "/Service/Partners/index"},
{name: "服务提供商介绍"},
{ name: "服务中心", path: "/Service/BarcodeV" },
{ name: "标准服务提供商", path: "/Service/Partners/index" },
{ name: "服务提供商介绍" },
]);
},
methods: {},
......@@ -30,14 +41,49 @@ export default {
</script>
<style lang="scss">
.n-service.partners-case {
.msg-cont {
@include module-box;
padding: 30px 0;
.msg-title {
color: #454545;
font-size: 26px;
text-align: center;
}
.msg-head {
border-bottom: 1px dashed #c5d8ee;
padding: 20px 0;
display: flex;
justify-content: space-between;
font-size: 12px;
flex-wrap: wrap;
.msg-head-left {
span {
margin-right: 25px;
&:last-child {
margin: 0;
}
}
}
.msg-head-right {
display: flex;
align-items: center;
img {
margin-left: 14px;
}
}
}
.msg-text {
margin-top: 20px;
p {
// font-family: PingFangSC-Regular, PingFang SC;
margin: 10px 0;
text-indent: 25px;
font-size: 14px;
font-weight: 400;
color: #414345;
text-indent: 2em;
}
.strong {
font-size: 14px;
font-weight: bold;
}
}
}
</style>
src/views/Service/Partners/list.vue
......@@ -42,52 +42,14 @@
</div>
<div class="col-lg-4 text-left">
<el-button type="primary" size="small" @click="partnersFrontList">搜索</el-button>
<el-button type="primary" size="small" @click="partnersFrontList"
>搜索</el-button
>
</div>
<ul class="main-list">
<!-- 注意！这里请后台开发的同学替换成循环输出 top 20 -->
<li>
<a target="_blank" href="/Service/Partners/content?id=7">
上海路歌信息技术有限公司</a
>
</li>
<li>
<a target="_blank" href="/Service/Partners/content?id=6">
上海悦孜企业信息咨询有限公司</a
>
</li>
<li>
<a target="_blank" href="/Service/Partners/content?id=5">
上海敖维计算机科技发展有限公司</a
>
</li>
<li>
<a target="_blank" href="/Service/Partners/content?id=4">
北京东方捷码科技开发中心</a
>
</li>
<li>
<a target="_blank" href="/Service/Partners/content?id=3">
北京爱创科技股份有限公司</a
>
</li>
<li>
<a target="_blank" href="/Service/Partners/content?id=2">
多米诺标识科技有限公司</a
>
</li>
<li>
<a target="_blank" href="/Service/Partners/content?id=1">
北京嘉华汇诚科技股份有限公司</a
>
<li v-for="(tmp, i) in list" :key="i" @click="handelJumpMsg(tmp)">
<a> {{ tmp.title }}</a>
</li>
</ul>
<pages
......@@ -102,6 +64,7 @@
</template>
<script>
import { mapMutations } from "vuex";
import pages from "../../comps/pages2.vue";
export default {
......@@ -141,12 +104,23 @@ export default {
{ value: "建材" },
{ value: "其他" },
],
list: [],
};
},
created() {
this.partnersFrontList();
},
methods: {
...mapMutations("service", {
setPartnersMsg: "setPartnersMsg",
}),
// 点击列表跳转详情
handelJumpMsg(msg) {
this.setPartnersMsg(msg);
this.$router.push({
path: "/Service/Partners/content",
});
},
// 接收分页子组件传过来的值
receivePagesChild(val) {
this.pageParams.currPage = val;
......@@ -166,6 +140,8 @@ export default {
console.log(businessGetPlanBranchListRes, "businessGetPlanBranchListRes");
if (success) {
console.log(data, "服务商列表");
this.pageParams.total = data.totalCount;
this.list = data.list;
}
},
},
......
src/vuex/service/types.js
export const SET_PARTNERS_MSG = "SetPartnersMsg";
export const SET_PARTNERS_MSG = "setPartnersMsg";
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