Skip to content

G
gs1
Commit 52aade3a by 林家欣
Options

联调首页上半部

parent 27fa6f5c
Showing with 135 additions and 227 deletions
package.json
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"jquery": "^3.6.0", "jquery": "^3.6.0",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"js-sha256": "^0.9.0", "js-sha256": "^0.9.0",
"moment": "^2.29.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"qrcodejs2": "0.0.2", "qrcodejs2": "0.0.2",
......
src/axios/module/home.js
...@@ -2,12 +2,26 @@ import { ...@@ -2,12 +2,26 @@ import {
POST POST
} from "../fetch.js" } from "../fetch.js"
// 根据业主id查询报名表
const homeBigImages = async (params = {}) => { const Prefix = process.env.NODE_ENV === 'development' ? '/office' : '/office';
return await POST("/office/indexCarouselManage/api/bigImages", params)
// 首页大轮播图
const homeBigImages = (params = {}) => {
return POST(`${Prefix}/indexCarouselManage/api/bigImages`, params)
} }
// 要闻左侧图片资讯
const homePictureImageList = (params = {}) => {
return POST(`${Prefix}/picture/api/pictureImageList`, params)
}
// 要闻右侧标题列表
const homeImportantNewList = (params = {}) => {
return POST(`${Prefix}/news/api/importantNewList`, params)
}
export default { export default {
homeBigImages, homeBigImages,
homePictureImageList,
homeImportantNewList,
} }
src/main.js
...@@ -67,6 +67,9 @@ import "nprogress/nprogress.css"; ...@@ -67,6 +67,9 @@ import "nprogress/nprogress.css";
NProgress.inc(0.3); NProgress.inc(0.3);
NProgress.configure({easing: "ease", speed: 500, showSpinner: false}); NProgress.configure({easing: "ease", speed: 500, showSpinner: false});
import moment from 'moment';
Vue.prototype.$moment = moment;
Vue.config.productionTip = false; Vue.config.productionTip = false;
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
......
src/views/Home/comps/list.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg"> <div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg">
<div class="col-lg-8 list-left"> <div class="col-lg-8 list-left">
<span></span> <span></span>
<span>{{tmp.name}}</span> <span>{{tmp.title}}</span>
</div> </div>
<div class="col-lg-4 list-right">{{tmp.time}}</div> <div class="col-lg-4 list-right">{{tmp.time}}</div>
</div> </div>
...@@ -22,9 +22,7 @@ export default { ...@@ -22,9 +22,7 @@ export default {
}); });
}, },
handelMore() { handelMore() {
this.$router.push({ window.open('/News/index', '_blank');
path: '/News/index'
});
} }
}, },
} }
......
src/views/Home/index.vue
...@@ -4,91 +4,36 @@ ...@@ -4,91 +4,36 @@
<div id="banner" class="banner carousel slide" data-bs-ride="carousel"> <div id="banner" class="banner carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators"> <div class="carousel-indicators">
<button <button
v-for="(el, i) in banner"
:key="el.id"
type="button" type="button"
data-bs-target="#banner" data-bs-target="#banner"
data-bs-slide-to="0" :data-bs-slide-to="i"
class="active" :class="{ active: i === 0 }"
aria-current="true" aria-current="true"
aria-label="Slide 1" :aria-label="`Slide ${i}`"
></button>
<button
type="button"
data-bs-target="#banner"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#banner"
data-bs-slide-to="2"
aria-label="Slide 3"
></button> ></button>
</div> </div>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div
<!-- <img :class="['carousel-item', { active: i === 0 }]"
src="../../assets/image/home/banner.png" v-for="(el, i) in banner"
class="d-block w-100" :key="el.id"
alt="..." >
/> -->
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-lg-8 carousel-caption-left">
<div class="carousel-title">商品条码</div>
<p class="carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<button class="carousel-btn">了解更多</button>
</div>
<div class="col-4 carousel-caption-right d-lg-block">
<img src="../../assets/image/home/banner2.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!-- <img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/> -->
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-lg-8 carousel-caption-left">
<div class="carousel-title">商品条码2</div>
<p class="carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<button class="carousel-btn">了解更多</button>
</div>
<div class="col-4 carousel-caption-right d-lg-block">
<img src="../../assets/image/home/banner2.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!-- <img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/> -->
<div class="carousel-caption"> <div class="carousel-caption">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 carousel-caption-left"> <div class="col-lg-8 carousel-caption-left">
<div class="carousel-title">商品条码3</div> <div class="carousel-title">{{ el.title }}</div>
<p class="carousel-note"> <p class="carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。 {{ el.brief }}
</p> </p>
<button class="carousel-btn">了解更多</button> <button class="carousel-btn" @click="learnMore(i)">
了解更多
</button>
</div> </div>
<div class="col-4 carousel-caption-right d-lg-block"> <div class="col-4 carousel-caption-right d-lg-block">
<img src="../../assets/image/home/banner2.jpg" alt="" /> <img :src="el.picIndexPath" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -108,58 +53,28 @@ ...@@ -108,58 +53,28 @@
> >
<div class="carousel-indicators"> <div class="carousel-indicators">
<button <button
v-for="(el, i) in newsBanner"
:key="el.id"
type="button" type="button"
data-bs-target="#jiaodiantu" data-bs-target="#jiaodiantu"
data-bs-slide-to="0" :data-bs-slide-to="i"
class="active" :class="{ active: i === 0 }"
aria-current="true" aria-current="true"
aria-label="Slide 1" :aria-label="`Slide ${i}`"
></button>
<button
type="button"
data-bs-target="#jiaodiantu"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#jiaodiantu"
data-bs-slide-to="2"
aria-label="Slide 3"
></button> ></button>
</div> </div>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div
<img :class="['carousel-item', { active: i === 0 }]"
src="../../assets/image/home/jiaodiantu.png" v-for="(el, i) in newsBanner"
class="d-block w-100" :key="el.id"
alt="..." >
/> <img :src="el.picFile" class="d-block" alt="..." />
<div class="carousel-caption"> <div class="carousel-caption">
<div class="carousel-title"> <div class="carousel-title">
国家市场监督管理总局赴中国物品编码中心进行追溯工作调研 {{ el.title }}
</div>
</div> </div>
</div> </div>
<div class="carousel-item">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="carousel-title">Second slide label</div>
</div>
</div>
<div class="carousel-item">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="carousel-title">Second slide label</div>
</div>
</div> </div>
</div> </div>
<div class="inverted"> <div class="inverted">
...@@ -175,8 +90,6 @@ ...@@ -175,8 +90,6 @@
alt="..." alt="..."
/> />
</button> </button>
</div>
<button <button
class="carousel-control-next" class="carousel-control-next"
type="button" type="button"
...@@ -191,6 +104,7 @@ ...@@ -191,6 +104,7 @@
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="col-lg-4"> <div class="col-lg-4">
<ul class="nav nav-tabs tabs1" id="myTab" role="tablist"> <ul class="nav nav-tabs tabs1" id="myTab" role="tablist">
<li <li
...@@ -198,6 +112,7 @@ ...@@ -198,6 +112,7 @@
role="presentation" role="presentation"
v-for="(tmp, i) in news" v-for="(tmp, i) in news"
:key="i" :key="i"
@click="handelNewsTab(i)"
> >
<button <button
:class="['nav-link', { active: i === 0 }]" :class="['nav-link', { active: i === 0 }]"
...@@ -213,16 +128,13 @@ ...@@ -213,16 +128,13 @@
</button> </button>
</li> </li>
</ul> </ul>
<div class="tab-content marginTop10" id="myTabContent"> <div class="tab-content marginTop10">
<div <div
v-for="(tmp, i) in news" class="tab-pane fade show active"
:key="i"
:class="['tab-pane', 'fade', { 'show active': i === 0 }]"
:id="tmp.type"
role="tabpanel" role="tabpanel"
:aria-labelledby="tmp.type + '-tab'" aria-labelledby="yaowen-tab"
> >
<list :list="tmp.data" /> <list :list="news[0].data" />
</div> </div>
</div> </div>
</div> </div>
...@@ -648,6 +560,8 @@ export default { ...@@ -648,6 +560,8 @@ export default {
data() { data() {
return { return {
keywords: "", keywords: "",
banner: [], // 首页大轮播图
newsBanner: [], // 要闻左侧图片
news: [ news: [
{ {
type: "yaowen", type: "yaowen",
...@@ -655,115 +569,28 @@ export default { ...@@ -655,115 +569,28 @@ export default {
link: "", link: "",
active: "yaowen", active: "yaowen",
data: [ data: [
{
name: "2021年第一届中国ECR委员会董事会在杭州顺利召开",
time: "2020-10-19",
},
{
name: "厘清条码服务需求　提升条码服务质量",
time: "2020-10-11",
},
{
name: "京东商品平台发布商品条码(GTIN)快速发品功能类目覆盖公告",
time: "2020-09-18",
},
{
name: "中国标准 引领国际——我国提出世界首个工业化建造与自动识别技术应用ISO国际标准获成功立项",
time: "2020-09-14",
},
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
time: "2020-09-03",
},
{
name: "中国主导的首个二维码码制国际标准正式发布",
time: "2020-08-31",
},
{
name: "国际药品监管机构联盟发布追溯系统互操作性建议",
time: "2020-08-11",
},
{
name: "中国物品编码中心应邀出席2021GFSI中国主题日活动",
time: "2020-07-20",
},
{
name: "商家最快1分钟极速上架新品 京东商品管理系统全新升级",
time: "2020-07-20",
},
], ],
}, },
{ {
type: "zhongxin", type: "zhongxin",
name: "中心", name: "中心",
link: "", link: "/News/Center",
active: "zhongxin", active: "zhongxin",
data: [ data: [],
{
name: "优数字化生态 享智慧化生活 ——2021年第十八届中国ECR大会于杭州盛大开幕",
time: "2020-10-20",
},
{
name: "2021年第一届中国ECR委员会董事会在杭州顺利召开",
time: "2020-10-19",
},
{
name: "厘清条码服务需求　提升条码服务质量",
time: "2020-10-11",
},
{
name: "京东商品平台发布商品条码(GTIN)快速发品功能类目覆盖公告",
time: "2020-09-18",
},
],
}, },
{ {
type: "difang", type: "difang",
name: "地方", name: "地方",
link: "", link: "/News/Local",
active: "difang", active: "difang",
data: [ data: [],
{
name: "中国物品编码中心湖南分中心开展 “我为企业优服务”活动",
time: "2020-10-22",
},
{
name: "中国物品编码中心宁波分中心组织召开医疗器械唯一标识(UDI)专项培训",
time: "2020-10-22",
},
{
name: "中国物品编码中心广州分中心积极开展 “世界标准日”宣传活动",
time: "2020-10-20",
},
{
name: "中国物品编码中心安徽分中心赴黄山智慧旅游有限公司开展地理标志产品追溯调研",
time: "2020-10-20",
},
],
}, },
{ {
type: "guoji", type: "guoji",
name: "国际", name: "国际",
link: "", link: "/News/International",
active: "guoji", active: "guoji",
data: [ data: [],
{
name: "阿里巴巴（法国）与GS1法国签署合作备忘录 鼓励企业使用GS1标准并提供优质产品数据",
time: "2017-07-10",
},
{
name: "意大利物品编码协会与阿里巴巴集团意大利办事处开展合作",
time: "2017-03-29",
},
{
name: "GS1澳大利亚与阿里巴巴集团签约 天猫澳大利亚进口商品今起可追溯",
time: "2017-01-06",
},
{
name: "可信标识符成为欧洲跨境电商保护措施",
time: "2016-10-21",
},
],
}, },
], ],
chaxun: { chaxun: {
...@@ -1084,7 +911,7 @@ export default { ...@@ -1084,7 +911,7 @@ export default {
}; };
}, },
created() { created() {
console.log(this.$route, "this.$route"); // console.log(this.$route, "this.$route");
this.dzfw.push(this.dzfLastChild); this.dzfw.push(this.dzfLastChild);
this.init(); this.init();
}, },
...@@ -1093,13 +920,59 @@ export default { ...@@ -1093,13 +920,59 @@ export default {
init() { init() {
// 首页大轮播图 // 首页大轮播图
this.homeBigImages(); this.homeBigImages();
// 要闻左侧图片资讯
this.homePictureImageList();
// 要闻右侧标题列表
this.homeImportantNewList();
}, },
// 首页大轮播图 // 首页大轮播图
async homeBigImages() { async homeBigImages() {
console.log(this.$api, 'this.$api'); // console.log(this.$api, 'this.$api');
const homeBigImagesRes = await this.$api.home.homeBigImages(); const homeBigImagesRes = await this.$api.home.homeBigImages();
const { returnCode, data } = homeBigImagesRes;
console.log(homeBigImagesRes, 'homeBigImagesRes'); if (returnCode === "0") {
data.forEach((el) => {
el.picIndexPath = `http://www.gs1cn.org/img/demo/${el.picIndexPath}`;
});
this.banner = data;
}
console.log(homeBigImagesRes, "首页大轮播图");
},
// 了解更多
learnMore(i) {
window.open(this.banner[i].directpath, "_blank");
},
// 要闻左侧图片资讯
async homePictureImageList() {
const homePictureImageListRes =
await this.$api.home.homePictureImageList();
const { returnCode, data } = homePictureImageListRes;
if (returnCode === "0") {
data.forEach((el) => {
el.picFile = `http://www.gs1cn.org/news/newsimg/${el.picFile}`;
});
this.newsBanner = data;
}
console.log(homePictureImageListRes, "要闻左侧图片资讯");
},
// 要闻右侧标题列表
async homeImportantNewList() {
const homeImportantNewListRes =
await this.$api.home.homeImportantNewList();
const { returnCode, data } = homeImportantNewListRes;
if (returnCode === "0") {
data.forEach(el => {
el.time = this.$moment(el.showtime).format('MM-DD');
})
this.news[0].data = data;
}
console.log(homeImportantNewListRes, "要闻右侧标题列表");
},
// 要闻、中心、地方、国际点击
handelNewsTab(i) {
if (this.news[i].link) {
window.open(this.news[i].link, '_blank');
}
}, },
// 我要申请商品条码 // 我要申请商品条码
wysqsptmHandelClick() { wysqsptmHandelClick() {
...@@ -1207,6 +1080,12 @@ export default { ...@@ -1207,6 +1080,12 @@ export default {
} }
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.banner {
.carousel-title {
font-size: 25px !important;
line-height: 30px !important;
}
}
.dzfwDialog-width { .dzfwDialog-width {
width: 140px; width: 140px;
margin: 0 auto; margin: 0 auto;
...@@ -1286,7 +1165,7 @@ export default { ...@@ -1286,7 +1165,7 @@ export default {
.carousel-caption-right { .carousel-caption-right {
display: none; display: none;
img { img {
width: 100%; // width: 100%;
height: 100%; height: 100%;
} }
} }
...@@ -1328,6 +1207,16 @@ export default { ...@@ -1328,6 +1207,16 @@ export default {
} }
} }
.carousel-inner { .carousel-inner {
height: 450px;
.carousel-item {
height: 100%;
width: 100%;
img {
width: 100%;
height: 100%;
}
}
.carousel-caption { .carousel-caption {
left: 10px; left: 10px;
right: 0; right: 0;
...@@ -1340,6 +1229,9 @@ export default { ...@@ -1340,6 +1229,9 @@ export default {
} }
} }
} }
.carousel-indicators {
bottom: 5px;
}
.carousel-control-prev, .carousel-control-prev,
.carousel-control-next { .carousel-control-next {
opacity: 1; opacity: 1;
......
yarn.lock deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
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