443 lines
10 KiB
Vue
443 lines
10 KiB
Vue
<template>
|
||
<view style="padding-bottom: 50rpx;">
|
||
<!-- classify -->
|
||
<view class="classify">
|
||
<u-grid :border="false" col="3">
|
||
<u-grid-item v-for="(listItem,listIndex) in classifyList" :key="listIndex" @click="click(listIndex)">
|
||
<!-- 懒加载 :lazy-load="true" -->
|
||
<u--image :src="listItem.src" width="86rpx" height="86rpx" :lazy-load="true">
|
||
</u--image>
|
||
<text class="grid-text">{{listItem.title}}</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
|
||
<!-- 行业新闻 -->
|
||
<view>
|
||
<view class="subtitle">
|
||
<u--image src="/static/report/hy_icon_xwx.png" width="24rpx" height="24rpx" :lazy-load="true">
|
||
</u--image>
|
||
<text class="xw_text text">行业新闻</text>
|
||
</view>
|
||
<view class="xw_content" v-for="(item,index) in newsList" :key="index" @click="clickNews(index)">
|
||
<u--image :src="item.src" width="192rpx" height="122rpx" :lazy-load="true">
|
||
</u--image>
|
||
<view class="xw_right">
|
||
<view class="xw_title">
|
||
{{item.title}}
|
||
</view>
|
||
<view style="display: flex;">
|
||
<text class="xw_time">
|
||
{{item.time}}
|
||
</text>
|
||
<text class="xw_time xw_place">
|
||
{{item.place}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新品发布 -->
|
||
<view>
|
||
<view class="subtitle">
|
||
<u--image src="/static/report/hy_icon_fux.png" width="24rpx" height="24rpx" :lazy-load="true">
|
||
</u--image>
|
||
<text class="xpfb_text text">新品发布</text>
|
||
</view>
|
||
<view class="products_box">
|
||
<u-grid :border="false" col="2">
|
||
<u-grid-item v-for="(item,index) in productList" :key="index">
|
||
<u-image src="/static/products/sy_bb.png" width="354rpx" height="539rpx" :lazy-load="true">
|
||
</u-image>
|
||
<view class="bgContent">
|
||
<view>
|
||
<u-image :src="item.src" width="346rpx" height="320rpx" :lazy-load="true"
|
||
@click="toDetailPage()">
|
||
</u-image>
|
||
<view class="img_tag">{{item.img_tag}}</view>
|
||
</view>
|
||
<view style="padding: 18rpx;">
|
||
<view class="title_box">
|
||
<text class="title">{{item.title}}</text>
|
||
<u-tag :text="item.tag" type="warning" shape="circle"></u-tag>
|
||
</view>
|
||
|
||
<view class="product_desc">
|
||
{{item.desc}}
|
||
</view>
|
||
<view class="releaseDate">
|
||
<u-image src="/static/products/sy_icon_sjf.png" width="22rpx" height="22rpx"
|
||
:lazy-load="true">
|
||
</u-image>
|
||
<text class="release">发布日期：</text>
|
||
<text>{{item.time}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 认证厂家 -->
|
||
<view>
|
||
<view class="subtitle">
|
||
<u--image src="/static/report/hy_icon_cjx.png" width="24rpx" height="24rpx" :lazy-load="true">
|
||
</u--image>
|
||
<text class="rzcj_text text">认证厂家</text>
|
||
</view>
|
||
<view class="xw_content" v-for="(item,index) in cjsList" :key="index" @click="clickCj(index)">
|
||
<u--image :src="item.src" width="112rpx" height="112rpx" :lazy-load="true">
|
||
</u--image>
|
||
<view class="xw_right">
|
||
<view class="xw_title">
|
||
{{item.title}}
|
||
</view>
|
||
<view style="display: flex;">
|
||
<text class="cj_tags" v-for="(tagsItem,tagsIndex) in item.tags" :key="tagsIndex">
|
||
{{tagsItem.tag}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
classifyList: [{
|
||
src: '/static/report/hy_icon_xw.png',
|
||
title: '行业新闻'
|
||
},
|
||
{
|
||
src: '/static/report/hy_icon_fu.png',
|
||
title: '新品发布'
|
||
},
|
||
{
|
||
src: '/static/report/hy_icon_cj.png',
|
||
title: '认证厂家'
|
||
},
|
||
],
|
||
productList: [{
|
||
src: '/static/products/zhanwei_dg.png',
|
||
title: '锅巴',
|
||
tag: '无添加剂',
|
||
img_tag: '零食铺子',
|
||
desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
|
||
time: '2022-12-04'
|
||
},
|
||
{
|
||
src: '/static/products/zhanwei_dg(2).png',
|
||
title: '干吃汤圆',
|
||
tag: '天然原料',
|
||
img_tag: '糕点卷酥',
|
||
desc: '休闲食品厂家甜品糯米食品零食闽南特产宵夜好吃糍粑',
|
||
time: '2022-12-04'
|
||
},
|
||
{
|
||
src: '/static/products/zhanwei_dg(1).png',
|
||
title: '紫薯魔芋人参魔芋人参魔芋人参…',
|
||
tag: '天然原料',
|
||
img_tag: '健康创新',
|
||
desc: '紫薯魔芋人参代餐粉 冲调饮品贴牌加工 五谷杂粮粉代餐',
|
||
time: '2022-12-04'
|
||
},
|
||
{
|
||
src: '/static/products/zhanwei_dg(3).png',
|
||
title: '焦糖饼干',
|
||
tag: '无防腐剂',
|
||
img_tag: '饼干曲奇',
|
||
desc: '比利时风味焦糖饼干代餐小吃零食品',
|
||
time: '2022-12-04'
|
||
}
|
||
],
|
||
newsList: [{
|
||
src: '/static/report/zhanwei_xf.png',
|
||
title: '2022近50款食品饮料新品，创新的方向都在这里',
|
||
time: '2022-12-03 09:59',
|
||
place: '第一食品资讯官方账号'
|
||
},
|
||
{
|
||
src: '/static/report/zhanwei_zh.png',
|
||
title: '食品企业如何开发新产品？创新思维又发挥着怎样的效应呢？',
|
||
time: '2022-10-18 14:43',
|
||
place: '腾讯新闻 '
|
||
},
|
||
{
|
||
src: '/static/report/zhanwei_zh.png',
|
||
title: '食品企业如何开发新产品？创新思维又发挥着怎样的效应呢？',
|
||
time: '2022-10-18 14:43',
|
||
place: '腾讯新闻'
|
||
},
|
||
],
|
||
cjsList: [
|
||
|
||
{
|
||
src: '/static/report/zhanwei_xf(1).png',
|
||
title: '西安兴沃丰餐饮管理有限责任公司',
|
||
tags: [{
|
||
tag: '咖啡'
|
||
},
|
||
{
|
||
tag: '饮品'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
src: '/static/report/zhanwei_xf(2).png',
|
||
title: '福建省海纳川食品有限公司',
|
||
tags: [{
|
||
tag: '活冻鲍鱼'
|
||
},
|
||
{
|
||
tag: '鲍鱼罐头'
|
||
},
|
||
{
|
||
tag: '佛跳墙'
|
||
},
|
||
{
|
||
tag: '海螺片'
|
||
}
|
||
|
||
]
|
||
},
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
//点击一级分类
|
||
click(listIndex) {
|
||
//点击行内新闻时
|
||
if (listIndex == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/news/news'
|
||
})
|
||
} else if (listIndex == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/certifiedCj/certifiedCj'
|
||
})
|
||
}
|
||
},
|
||
// 跳转到新闻详情页
|
||
clickNews(index) {
|
||
if (index == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/detail/xwDetail/xwDetail'
|
||
})
|
||
}
|
||
},
|
||
//点击图片跳转到详情页
|
||
toDetailPage() {
|
||
uni.navigateTo({
|
||
url: '/pages/detail/productsDetail/productsDetail'
|
||
})
|
||
},
|
||
// 跳转到认证厂家详情页
|
||
clickCj(index) {
|
||
if (index == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/detail/certifiedCjDetail/certifiedCjDetail'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
//分类模块
|
||
.classify {
|
||
background: #FFFFFF;
|
||
border-radius: 0 0 24rpx 24rpx;
|
||
box-shadow: 0px 2px 4px 0px rgba(206, 206, 206, 0.5);
|
||
padding-bottom: 30rpx;
|
||
margin: 0 16rpx;
|
||
|
||
.u-grid {
|
||
padding-top: 22rpx;
|
||
|
||
.grid-text {
|
||
padding-top: 8rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.subtitle {
|
||
margin: 24rpx 0 16rpx 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 40rpx;
|
||
padding-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.xw_text {
|
||
color: #5ACCF0;
|
||
}
|
||
|
||
|
||
.xw_content {
|
||
background: #FFFFFF;
|
||
border: 1rpx solid #EEEEEE;
|
||
display: flex;
|
||
padding: 29rpx 19rpx;
|
||
|
||
.xw_right {
|
||
padding-left: 19rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.xw_title {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: bold;
|
||
color: #3E3E3E;
|
||
line-height: 42rpx;
|
||
-webkit-line-clamp: 2;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.xw_time {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #969696;
|
||
line-height: 33rpx;
|
||
|
||
}
|
||
|
||
.xw_place {
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.cj_tags {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #969696;
|
||
line-height: 33rpx;
|
||
padding-right: 10rpx;
|
||
margin-top: 35rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.xpfb_text {
|
||
color: #FCAC18;
|
||
}
|
||
|
||
.rzcj_text {
|
||
color: #78E13A;
|
||
}
|
||
|
||
.products_box {
|
||
padding: 10rpx;
|
||
|
||
.u-grid-item {
|
||
|
||
.bgContent {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
|
||
.u-image__image {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.img_tag {
|
||
position: absolute;
|
||
padding: 2rpx 8rpx;
|
||
right: 5px;
|
||
top: 30rpx;
|
||
border-radius: 54rpx 0px 0px 54rpx;
|
||
box-shadow: 0px 2rpx 4rpx 0px #078C42;
|
||
background: linear-gradient(135deg, #0DB658 0%, #16DD6D 100%);
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
|
||
.title_box {
|
||
position: relative;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
width: 186rpx;
|
||
font-size: 26rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: bold;
|
||
color: #0EBB5B;
|
||
line-height: 37rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.u-tag {
|
||
height: 26rpx;
|
||
line-height: 26rpx;
|
||
background: linear-gradient(124deg, #FEAA19 0%, #FDCF3A 100%);
|
||
|
||
.u-tag__text {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.product_desc {
|
||
font-size: 22rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #3E3E3E;
|
||
line-height: 26rpx;
|
||
margin-top: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
-webkit-line-clamp: 2;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.releaseDate {
|
||
font-size: 22rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A3A3A3;
|
||
line-height: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 25rpx;
|
||
|
||
image {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.release {
|
||
padding: 0 10rpx 0 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|