52 changed files with 23967 additions and 477 deletions
File diff suppressed because it is too large
@ -0,0 +1,16 @@ |
|||
/* 左右联动props */ |
|||
export interface ICateItem { |
|||
id: number; |
|||
name: string; |
|||
icon: string; |
|||
goods_list: IGood[]; |
|||
[key: string]: any; |
|||
} |
|||
|
|||
export interface IGood { |
|||
id: number; |
|||
content: string; |
|||
name: string; |
|||
images: string; |
|||
[key: string]: any; |
|||
} |
|||
@ -0,0 +1,407 @@ |
|||
<template> |
|||
<view class="zh-wrapper"> |
|||
<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y> |
|||
<view class="wrapper"> |
|||
<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id == curCateId}" |
|||
v-for="(item, index) in goods" :key="index" @tap="handleMenuTap(item.id)"> |
|||
<view class="changeicon" v-if="item.id == curCateId"> |
|||
|
|||
</view> |
|||
<text class="menutitle">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" |
|||
@scroll="handleGoodsScroll"> |
|||
<view class="wrapper"> |
|||
<view class="list"> |
|||
<!-- category begin --> |
|||
<view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`"> |
|||
<view class="title"> |
|||
<image :src="item.icon" class="icon"></image> |
|||
<text class="fristtitle">{{ item.name }}</text> |
|||
</view> |
|||
<view class="items"> |
|||
<!-- 商品 begin --> |
|||
<view class="good" v-for="(good, key) in item.goods_list" :key="key" @click="goxdbdetail(good.id)"> |
|||
<slot name="custom" :data="good"> |
|||
<!-- <image :src="good.images" class="image"></image> --> |
|||
<text class="name">{{ good.name }}</text> |
|||
<image class="icon" src="@/static/img/icon2.png" mode=""></image> |
|||
<!-- <view class="right"> --> |
|||
<!-- <text class="tips">{{ good.content }}</text> --> |
|||
<!-- </view> --> |
|||
</slot> |
|||
</view> |
|||
<!-- 商品 end --> |
|||
</view> |
|||
</view> |
|||
<!-- category end --> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, nextTick, getCurrentInstance, watch } from "vue"; |
|||
import { ICateItem } from "./interface"; |
|||
const props = defineProps<{ |
|||
scrollList: ICateItem[], |
|||
searchVal: string, |
|||
}>() |
|||
const instance = getCurrentInstance(); |
|||
const menuScrollIntoView = ref(""); |
|||
const curCateId = ref(6905); |
|||
const cateScrollTop = ref(0); |
|||
// 计算高度状态 |
|||
const sizeCalcState = ref(false); |
|||
const goods = ref<ICateItem[]>([]); |
|||
|
|||
watch( |
|||
() => props.scrollList, |
|||
newVal => { |
|||
goods.value = newVal; |
|||
nextTick(() => { |
|||
if (newVal && newVal.length > 0) { |
|||
calcSize(); |
|||
} |
|||
}) |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
deep: true |
|||
} |
|||
) |
|||
|
|||
// 点击左侧菜单 |
|||
function handleMenuTap(id: number) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
|
|||
curCateId.value = id |
|||
|
|||
nextTick(() => { |
|||
cateScrollTop.value = goods.value.find(item => item.id == id).top |
|||
}) |
|||
} |
|||
|
|||
function fuzzyMatchGoods(goodsArray, searchTerm) { |
|||
const term = searchTerm.trim().toLowerCase(); |
|||
return goodsArray.filter(goodsItem => |
|||
goodsItem.goods_list.some(child => |
|||
(child.name?.toLowerCase() ?? '').includes(term) |
|||
) |
|||
); |
|||
} |
|||
|
|||
//搜索跳转 |
|||
function searchleMenuTap(search: string) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
try { |
|||
nextTick(() => { |
|||
const arr = fuzzyMatchGoods(goods.value,search) |
|||
console.log(arr[0]); |
|||
curCateId.value = arr[0]?.id |
|||
cateScrollTop.value = arr[0].top |
|||
}) |
|||
} catch(error) { |
|||
uni.showToast({ |
|||
title: '搜索为空' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// |
|||
function handleGoodsScroll({ detail }) { |
|||
if(!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
const { scrollTop } = detail |
|||
// 此处scrollTop + 1为了处理scrolltop的偏差值 |
|||
let tabs = goods.value.filter(item=> item.top <= (scrollTop + 1)).reverse() |
|||
if(tabs.length > 0){ |
|||
curCateId.value = tabs[0].id |
|||
} |
|||
} |
|||
|
|||
function calcSize() { |
|||
let h = 10 |
|||
|
|||
goods.value.forEach(item => { |
|||
let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`) |
|||
view.fields({ |
|||
size: true |
|||
}, (data: any) => { |
|||
item.top = h |
|||
h += data.height |
|||
item.bottom = h |
|||
}).exec() |
|||
}) |
|||
sizeCalcState.value = true |
|||
} |
|||
|
|||
const goxdbdetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/shophelpDetail?id='+id |
|||
}) |
|||
} |
|||
|
|||
defineExpose({ |
|||
searchleMenuTap |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
height: 100%; |
|||
} |
|||
.zh-wrapper { |
|||
height: calc(100% - 66rpx); |
|||
overflow: hidden; |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
.menus { |
|||
width: 200rpx; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #F1F3F9; |
|||
|
|||
.wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.menu { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
padding: 30rpx 20rpx; |
|||
font-size: 26rpx; |
|||
color: #3D3D3D; |
|||
position: relative; |
|||
|
|||
&:nth-last-child(1) { |
|||
margin-bottom: 130rpx; |
|||
} |
|||
|
|||
&.current { |
|||
background-color: #ffffff; |
|||
color: #0072FF; |
|||
} |
|||
|
|||
.dot { |
|||
position: absolute; |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
line-height: 34rpx; |
|||
font-size: 22rpx; |
|||
// background-color: $uni-color-primary; |
|||
color: #ffffff; |
|||
top: 16rpx; |
|||
right: 10rpx; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
} |
|||
.menutitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.changeicon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
position: fixed; |
|||
left: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods { |
|||
flex: 1; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ffffff; |
|||
|
|||
.wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 20rpx; |
|||
|
|||
.list { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
padding-bottom: 130rpx; |
|||
|
|||
.category { |
|||
width: 100%; |
|||
|
|||
.title { |
|||
padding: 30rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #0C092A; |
|||
|
|||
.icon { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
} |
|||
.fristtitle { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 530; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-bottom: -30rpx; |
|||
|
|||
:deep(.good) { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 30rpx; |
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #606266; |
|||
} |
|||
.icon { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
// .image { |
|||
// width: 160rpx; |
|||
// height: 160rpx; |
|||
// margin-right: 20rpx; |
|||
// border-radius: 8rpx; |
|||
// } |
|||
|
|||
// .right { |
|||
// flex: 1; |
|||
// height: 160rpx; |
|||
// overflow: hidden; |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// align-items: flex-start; |
|||
// justify-content: space-between; |
|||
// padding-right: 14rpx; |
|||
|
|||
// .name { |
|||
// font-family: Source Han Sans; |
|||
// font-size: 28rpx; |
|||
// font-weight: 300; |
|||
// line-height: 48rpx; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// letter-spacing: normal; |
|||
// color: #606266; |
|||
// } |
|||
|
|||
// .tips { |
|||
// width: 100%; |
|||
// height: 40rpx; |
|||
// line-height: 40rpx; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// white-space: nowrap; |
|||
// font-size: 28rpx; |
|||
// color: #606266; |
|||
// margin-bottom: 10rpx; |
|||
// } |
|||
|
|||
// .price_and_action { |
|||
// width: 100%; |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
|
|||
// .price { |
|||
// font-size: #606266; |
|||
// font-weight: 600; |
|||
// } |
|||
|
|||
// .btn-group { |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
// position: relative; |
|||
|
|||
// .btn { |
|||
// padding: 0 20rpx; |
|||
// box-sizing: border-box; |
|||
// font-size: 28rpx; |
|||
// height: 44rpx; |
|||
// line-height: 44rpx; |
|||
|
|||
// &.property_btn { |
|||
// border-radius: 24rpx; |
|||
// } |
|||
|
|||
// &.add_btn, |
|||
// &.reduce_btn { |
|||
// padding: 0; |
|||
// width: 44rpx; |
|||
// border-radius: 44rpx; |
|||
// } |
|||
// } |
|||
|
|||
// .dot { |
|||
// position: absolute; |
|||
// background-color: #ffffff; |
|||
// color: #606266; |
|||
// font-size: 28rpx; |
|||
// width: 36rpx; |
|||
// height: 36rpx; |
|||
// line-height: 36rpx; |
|||
// text-align: center; |
|||
// border-radius: 100%; |
|||
// right: -12rpx; |
|||
// top: -10rpx; |
|||
// } |
|||
|
|||
// .number { |
|||
// width: 44rpx; |
|||
// height: 44rpx; |
|||
// line-height: 44rpx; |
|||
// text-align: center; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
export default [ |
|||
{ |
|||
"id": 6905, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65825, |
|||
"name": "晨间套餐", |
|||
} |
|||
], |
|||
"name": "早晨的享受", |
|||
"icon": '/static/img/cbz.png' |
|||
}, |
|||
{ |
|||
"id": 6906, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65826, |
|||
"name": "午后小食", |
|||
}, |
|||
{ |
|||
"id": 65827, |
|||
"name": "中午套餐", |
|||
} |
|||
], |
|||
"name": "午间时光" |
|||
}, |
|||
{ |
|||
"id": 6907, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65828, |
|||
"name": "早餐优惠", |
|||
}, |
|||
{ |
|||
"id": 65829, |
|||
"name": "下午茶特惠", |
|||
}, |
|||
{ |
|||
"id": 65830, |
|||
"name": "晚间美食", |
|||
} |
|||
], |
|||
"name": "欢乐时光" |
|||
}, |
|||
{ |
|||
"id": 6908, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65831, |
|||
"name": "清晨套餐", |
|||
} |
|||
], |
|||
"name": "幸福早餐" |
|||
}, |
|||
{ |
|||
"id": 6909, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65832, |
|||
"name": "午餐精选", |
|||
}, |
|||
{ |
|||
"id": 65833, |
|||
"name": "下午茶时光", |
|||
} |
|||
], |
|||
"name": "愉快午餐" |
|||
}, |
|||
{ |
|||
"id": 6910, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65834, |
|||
"name": "美好早餐", |
|||
}, |
|||
{ |
|||
"id": 65835, |
|||
"name": "美味早晨", |
|||
}, |
|||
{ |
|||
"id": 65836, |
|||
"name": "愉快下午", |
|||
}, |
|||
{ |
|||
"id": 65837, |
|||
"name": "健康午餐", |
|||
} |
|||
], |
|||
"name": "欢乐午后" |
|||
}, |
|||
{ |
|||
"id": 6911, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65838, |
|||
"name": "健康早餐", |
|||
}, |
|||
{ |
|||
"id": 65839, |
|||
"name": "经典早晨", |
|||
} |
|||
], |
|||
"name": "阳光早餐" |
|||
}, |
|||
{ |
|||
"id": 6912, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65840, |
|||
"name": "舒适午后", |
|||
}, |
|||
{ |
|||
"id": 65841, |
|||
"name": "下午茶优惠", |
|||
} |
|||
], |
|||
"name": "午后悠闲" |
|||
}, |
|||
{ |
|||
"id": 6913, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65842, |
|||
"name": "下午茶特惠", |
|||
} |
|||
], |
|||
"name": "茶歇时光" |
|||
}, |
|||
{ |
|||
"id": 6914, |
|||
"goods_list": [ |
|||
{ |
|||
"id": 65843, |
|||
// "content": "购买全麦面包,享水果茶半价",
|
|||
"name": "活力早餐", |
|||
// "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
|
|||
}, |
|||
{ |
|||
"id": 65844, |
|||
// "content": "购买鸡蛋饼,享橙汁半价",
|
|||
"name": "早安时光", |
|||
// "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
|
|||
} |
|||
], |
|||
"name": "晨间时光" |
|||
} |
|||
] |
|||
@ -0,0 +1,18 @@ |
|||
{ |
|||
"id": "left-swipe-tab", |
|||
"name": "tab左侧导航", |
|||
"displayName": "tab左侧导航", |
|||
"version": "1.0.6", |
|||
"description": "tab左侧导航", |
|||
"keywords": [ |
|||
"tab", |
|||
"导航", |
|||
"选项卡" |
|||
], |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
] |
|||
} |
|||
} |
|||
@ -1,283 +1,611 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<scroll-view v-if="electionList.length !== 0" class="scroll-view" scroll-y @scrolltolower="loadMore" :show-scrollbar="false"> |
|||
<view v-for="(item, index) in electionList" :key="index" class="election-item"> |
|||
<view class="year-title"> |
|||
<view class="headpart"> |
|||
<text class="title">{{ item.vote_title }}</text> |
|||
<view |
|||
class="type" |
|||
:style=" |
|||
item.vote_title == 1 |
|||
? 'background: #DBEAFE;color: #3B82F6;' |
|||
: item.vote_title == 2 |
|||
? 'background: #DCFCE7;color: #10B981' |
|||
: 'background: #F3F4F6;color: #4B5563' |
|||
" |
|||
> |
|||
{{ item.status == 1 ? '未开始' : item.status == 2 ? '进行中' : '已结束' }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex-center-between" style="display: flex" v-show="expandedStates[index]"> |
|||
<view style="display: grid"> |
|||
<view |
|||
v-for="(candidate, cIndex) in item.candidate.slice(0, expandedStates[index] ? cIndex : 1)" |
|||
:key="cIndex" |
|||
class="candidate-item" |
|||
> |
|||
<view class="info-section"> |
|||
<view style="display: flex; align-items: center"> |
|||
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="candidate.photo" alt="" /> |
|||
<view style="margin-left: 24rpx; display: grid"> |
|||
<text class="name">{{ candidate.name }}</text> |
|||
<text class="college">{{ candidate.position }}</text> |
|||
</view> |
|||
</view> |
|||
<view style="display: flex; margin-top: 24rpx; font-family: Roboto; font-size: 28rpx; color: #4b5563"> |
|||
我的选择： |
|||
<view :class="['choice-tag', choiceClass(candidate.vote_result)]"> |
|||
{{ choiceText(candidate.vote_result) }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="expand-btn" @click="toggleExpand(index)"> |
|||
<text :class="['arrow', expandedStates[index] ? 'up' : 'down']"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view v-else> |
|||
<ex-empty :height="55" :tips="'暂无数据~'" /> |
|||
<u-navbar title="惠企通" placeholder="true" bgColor="#F1F3F9" leftIcon="map" leftIconSize="24rpx" leftText="呼和浩特" |
|||
@leftClick="leftClick"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<u-swiper :list="list5" @change="change" radius="0" height="180"> |
|||
<template #indicator> |
|||
<view class="indicator"> |
|||
<view class="indicator__dot" v-for="(item, index) in list5" :key="index" |
|||
:class="index === current ? 'indicator__dotactive':''"> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</u-swiper> |
|||
<view class="box"> |
|||
<image class="zuanti" src="@/static/logo.png" mode="scaleToFill" @click="goZT(1)"></image> |
|||
|
|||
<view class="titlebox"> |
|||
<view class="left"> |
|||
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yaohuodong.png" mode=""></image> |
|||
<text class="text">要活动</text> |
|||
</view> |
|||
<view class="more"> |
|||
更多活动 > |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view class="scroll-view_H" scroll-x="true"> |
|||
<view class="hdCard" v-for="(item,index) in hdList" :key="index"> |
|||
<image class="img" :src="item.pic" mode=""></image> |
|||
<view class="message"> |
|||
<view class="title"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="time"> |
|||
{{item.time}} |
|||
</view> |
|||
<view class="splace"> |
|||
{{item.splace}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<view class="smallshop"> |
|||
<text class="xdb">小店帮</text> |
|||
<view class="bangCart"> |
|||
<view class="bangone1" @click="gokdb"> |
|||
<text class="btext">开店帮</text> |
|||
<image style="height: 100%;width: 140rpx;" src="@/static/img/kdb.png" mode=""></image> |
|||
</view> |
|||
<view class="bangone2"> |
|||
<text class="btext">企业帮</text> |
|||
<image style="height: 100%;width: 140rpx;" src="@/static/img/qyb.png" mode=""></image> |
|||
</view> |
|||
<view class="bangone3" @click="gojrb"> |
|||
<text class="btext">金融帮</text> |
|||
<image style="height: 100%;width: 140rpx;" src="@/static/img/jrb.png" mode=""></image> |
|||
</view> |
|||
<view class="bangone4" @click="gomtb"> |
|||
<text class="btext">媒体帮</text> |
|||
<image style="height: 100%;width: 140rpx;" src="@/static/img/mtb.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="buttonCard"> |
|||
<view class="but"> |
|||
<image style="width: 96rpx;height: 96rpx;" src="@/static/img/cxw.png" mode=""></image> |
|||
<text class="butext">查小微</text> |
|||
</view> |
|||
<view class="but"> |
|||
<image style="width: 96rpx;height: 96rpx;" src="@/static/img/czl.png" mode=""></image> |
|||
<text class="butext">查专利</text> |
|||
</view> |
|||
<view class="but"> |
|||
<image style="width: 96rpx;height: 96rpx;" src="@/static/img/cbz.png" mode=""></image> |
|||
<text class="butext">查标准</text> |
|||
</view> |
|||
<view class="but"> |
|||
<image style="width: 96rpx;height: 96rpx;" src="@/static/img/bnb.png" mode=""></image> |
|||
<text class="butext">办年报</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="titlebox"> |
|||
<view class="left"> |
|||
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/tjhy.png" mode=""></image> |
|||
<text class="text">推荐会员</text> |
|||
</view> |
|||
<view class="more"> |
|||
更多会员 > |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="hylist"> |
|||
<tabsComm :tabsData="filterTabs" @tabChange="handleTabSelect" /> |
|||
<scroll-view scroll-y="auto" class="hyonne"> |
|||
<view class="hyCard" v-for="(item,index) in hyList" :key="index"> |
|||
<view class="left"> |
|||
<u-avatar :src="item.img" size="64"></u-avatar> |
|||
<view class="textpart"> |
|||
<view class="namepart"> |
|||
<text class="name">{{item.name}}</text> |
|||
<image style="width: 110rpx;height: 40rpx;margin-left: 16rpx;" |
|||
src="@/static/img/lsdr.png" mode=""></image> |
|||
</view> |
|||
<text class="company">{{item.company}}</text> |
|||
</view> |
|||
</view> |
|||
<image style="width: 48rpx;height: 48rpx;" src="@/static/img/Icon.png" mode=""></image> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image class="xzs" src="@/static/img/xzs.png" mode=""></image> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, watch } from 'vue' |
|||
import { getMyvote } from '../../api/votingElection' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const electionList = ref([]) |
|||
const page = ref(1) |
|||
const pageSize = ref(10) |
|||
const loading = ref(false) |
|||
const noMoreData = ref(false) |
|||
|
|||
// 展开状态管理 |
|||
const expandedStates = ref([]) |
|||
watch( |
|||
() => electionList.value, |
|||
(newVal) => { |
|||
expandedStates.value = newVal.map(() => false) |
|||
}, |
|||
{ |
|||
immediate: true |
|||
} |
|||
) |
|||
|
|||
const toggleExpand = (index) => { |
|||
expandedStates.value[index] = !expandedStates.value[index] |
|||
} |
|||
|
|||
const choiceClass = (choice) => { |
|||
switch (choice) { |
|||
case 1: |
|||
return 'agree' |
|||
case 2: |
|||
return 'oppose' |
|||
case 3: |
|||
return 'abstain' |
|||
default: |
|||
return '' |
|||
} |
|||
} |
|||
|
|||
const choiceText = (choice) => { |
|||
return ( |
|||
{ |
|||
1: '同意', |
|||
2: '反对', |
|||
3: '弃权' |
|||
}[choice] || '' |
|||
) |
|||
} |
|||
|
|||
// 获取数据 |
|||
const getList = async () => { |
|||
try { |
|||
loading.value = true |
|||
|
|||
let param = { |
|||
openid: userStore.openId, |
|||
page: page.value, |
|||
limit: pageSize.value |
|||
} |
|||
// 模拟接口请求（替换为你的真实接口） |
|||
const mockData = await getMyvote(param) |
|||
|
|||
// 处理数据 |
|||
electionList.value = [...electionList.value, ...mockData.data.data] |
|||
// electionList.value.push(mockData) |
|||
|
|||
// 判断是否还有数据 |
|||
noMoreData.value = mockData.data.data.length < pageSize.value |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 加载更多 |
|||
const loadMore = () => { |
|||
if (loading.value || noMoreData.value) return |
|||
page.value += 1 |
|||
getList() |
|||
} |
|||
|
|||
onShow(() => { |
|||
electionList.value = [] |
|||
getList() |
|||
}) |
|||
import { |
|||
ref, |
|||
watch |
|||
} from 'vue' |
|||
import tabsComm from '../index/tabsComm.vue' |
|||
|
|||
const current = ref(0) |
|||
|
|||
const list5 = reactive([ |
|||
'https://file.psd.cn/p/stock/20221014/f1lj5pww4yo.jpg', |
|||
'https://img.shetu66.com/2023/07/04/1688453333865029.png', |
|||
'https://tse3-mm.cn.bing.net/th/id/OIP-C.dg5f16itonvLphu4hOxtPgHaEK?rs=1&pid=ImgDetMain', |
|||
]); |
|||
|
|||
const change = (val) => { |
|||
current.value = val.current |
|||
} |
|||
|
|||
const hdList = ref([{ |
|||
pic: '/static/logo.png', |
|||
title: '小微企业培训小微企业培训', |
|||
time: '2025-02-14 12:00', |
|||
splace: '内蒙古呼和浩特科创中内蒙古呼和浩特科创中' |
|||
}, |
|||
{ |
|||
pic: '/static/logo.png', |
|||
title: '小微企业培训小微企业培训', |
|||
time: '2025-02-14 12:00', |
|||
splace: '内蒙古呼和浩特科创中内蒙古呼和浩特科创中' |
|||
}, |
|||
{ |
|||
pic: '/static/logo.png', |
|||
title: '小微企业培训小微企业培训', |
|||
time: '2025-02-14 12:00', |
|||
splace: '内蒙古呼和浩特科创中内蒙古呼和浩特科创中' |
|||
}, |
|||
{ |
|||
pic: '/static/logo.png', |
|||
title: '小微企业培训小微企业培训', |
|||
time: '2025-02-14 12:00', |
|||
splace: '内蒙古呼和浩特科创中内蒙古呼和浩特科创中' |
|||
} |
|||
|
|||
]) |
|||
|
|||
const currentTab = ref('全部'); |
|||
|
|||
// 选项卡配置（第一个必须是"全部"） |
|||
const filterTabs = reactive([{ |
|||
id: 1, |
|||
label: '法律' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
label: '媒体' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
label: '金融' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
label: '金1融' |
|||
} |
|||
]); |
|||
|
|||
// 处理选项卡选择 |
|||
const handleTabSelect = (tab) => { |
|||
currentTab.value = tab; |
|||
// 这里可以添加数据加载逻辑 |
|||
console.log('选择tab:', tab); |
|||
}; |
|||
|
|||
const leftClick = () => { |
|||
console.log(111); |
|||
} |
|||
|
|||
const hyList = ref([{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
}, |
|||
{ |
|||
img: '/static/img/Frame.png', |
|||
name: '韩梅梅', |
|||
company: '内蒙古数心法律资讯事务所' |
|||
} |
|||
]) |
|||
|
|||
const goZT = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/specialSubject?id='+id |
|||
}) |
|||
} |
|||
|
|||
const gokdb = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/shopHelp' |
|||
}) |
|||
} |
|||
|
|||
const gojrb = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/financialAssistance' |
|||
}) |
|||
} |
|||
|
|||
const gomtb = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mediaHelp' |
|||
}) |
|||
} |
|||
|
|||
|
|||
onShow(() => { |
|||
|
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
padding: 20rpx; |
|||
background-color: #f9fafb; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.election-item { |
|||
margin-bottom: 30rpx; |
|||
padding: 34rpx; |
|||
border-radius: 24rpx; |
|||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid #f3f4f6; |
|||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.year-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
|
|||
.headpart { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.title { |
|||
font-family: Roboto; |
|||
font-size: 32rpx; |
|||
font-weight: 800; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
|
|||
.type { |
|||
font-family: Roboto; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 4rpx 16rpx; |
|||
gap: 0rpx 20rpx; |
|||
flex-wrap: wrap; |
|||
align-content: flex-start; |
|||
border-radius: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.candidate-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
.info-section { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.name { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
|
|||
.college { |
|||
font-family: Roboto; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
letter-spacing: normal; |
|||
color: #6b7280; |
|||
} |
|||
|
|||
.choice-tag { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.agree { |
|||
color: #3b82f6; |
|||
} |
|||
|
|||
.oppose { |
|||
color: #f44336; |
|||
} |
|||
|
|||
.abstain { |
|||
color: #9ca3af; |
|||
} |
|||
|
|||
.year-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.expand-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666; |
|||
font-size: 26rpx; |
|||
padding: 10rpx 20rpx; |
|||
} |
|||
|
|||
.arrow { |
|||
display: inline-block; |
|||
width: 0; |
|||
height: 0; |
|||
margin-left: 10rpx; |
|||
border-left: 10rpx solid transparent; |
|||
border-right: 10rpx solid transparent; |
|||
} |
|||
|
|||
.down { |
|||
border-top: 15rpx solid #999; |
|||
} |
|||
|
|||
.up { |
|||
border-bottom: 15rpx solid #999; |
|||
} |
|||
|
|||
/* 优化候选人项间距 */ |
|||
.candidate-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
</style> |
|||
.container { |
|||
background-color: #F1F3F9; |
|||
height: calc(100vh - 182rpx); |
|||
|
|||
:deep(.u-navbar__content__left__text) { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
|
|||
:deep(.u-navbar__content__title) { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.indicator { |
|||
@include flex(row); |
|||
justify-content: center; |
|||
|
|||
&__dot { |
|||
height: 12rpx; |
|||
width: 12rpx; |
|||
border-radius: 200rpx; |
|||
background-color: rgba(255, 255, 255, 0.35); |
|||
margin: 0 10rpx; |
|||
transition: background-color 0.3s; |
|||
|
|||
} |
|||
|
|||
.indicator__dotactive { |
|||
background-color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
background-color: #F1F3F9; |
|||
padding: 0 24rpx; |
|||
|
|||
.zuanti { |
|||
width: 100%; |
|||
height: 160rpx; |
|||
border-radius: 134rpx; |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.scroll-view_H { |
|||
margin-top: 30rpx; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
|
|||
.hdCard { |
|||
display: inline-block; |
|||
width: 248rpx; |
|||
height: 340rpx; |
|||
border-radius: 16rpx; |
|||
background: #FFFFFF; |
|||
margin-right: 20rpx; |
|||
|
|||
.img { |
|||
width: 100%; |
|||
height: 196rpx; |
|||
} |
|||
|
|||
.message { |
|||
.title { |
|||
margin-left: 16rpx; |
|||
margin-top: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 26rpx; |
|||
font-weight: 350; |
|||
/* 文本/正文 */ |
|||
color: #1D2129; |
|||
max-width: 180rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.time { |
|||
margin-left: 16rpx; |
|||
margin-top: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
color: #666666; |
|||
max-width: 180rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.splace { |
|||
margin-left: 16rpx; |
|||
margin-top: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
color: #666666; |
|||
max-width: 222rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.smallshop { |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
padding: 3%; |
|||
box-sizing: border-box; |
|||
height: 366rpx; |
|||
border-radius: 24rpx; |
|||
background-color: #FFFFFF; |
|||
|
|||
.xdb { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
|
|||
.bangCart { |
|||
margin-top: 30rpx; |
|||
gap: 4%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.bangone1 { |
|||
flex: 1 1 45%; |
|||
height: 108rpx; |
|||
border-radius: 24rpx; |
|||
box-sizing: border-box; |
|||
border: 0.4rpx solid #007FFF; |
|||
background: #EDF5FF; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.bangone2 { |
|||
flex: 1 1 45%; |
|||
height: 108rpx; |
|||
border-radius: 24rpx; |
|||
box-sizing: border-box; |
|||
border: 0.4rpx solid #FF2228; |
|||
background: #FFF1F3; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.bangone3 { |
|||
margin-top: 20rpx; |
|||
flex: 1 1 45%; |
|||
height: 108rpx; |
|||
border-radius: 24rpx; |
|||
box-sizing: border-box; |
|||
border: 0.4rpx solid #FD8702; |
|||
background: #FFE7CE; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.bangone4 { |
|||
margin-top: 20rpx; |
|||
flex: 1 1 45%; |
|||
height: 108rpx; |
|||
border-radius: 24rpx; |
|||
box-sizing: border-box; |
|||
border: 0.4rpx solid #08B4BD; |
|||
background: #E5FEFF; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.btext { |
|||
margin-left: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: normal; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
/* 文本/正文 */ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.buttonCard { |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
height: 192rpx; |
|||
border-radius: 24rpx; |
|||
background-color: #ffffff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 64rpx; |
|||
|
|||
.but { |
|||
display: grid; |
|||
justify-items: center; |
|||
|
|||
.butext { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: normal; |
|||
letter-spacing: normal; |
|||
/* 文本/正文 */ |
|||
color: #1A1A1A; |
|||
margin-top: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hylist { |
|||
width: 100%; |
|||
display: grid; |
|||
justify-content: center; |
|||
|
|||
.hyCard { |
|||
margin-top: 24rpx; |
|||
width: 100%; |
|||
height: 160rpx; |
|||
border-radius: 24rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.textpart { |
|||
margin-left: 32rpx; |
|||
display: grid; |
|||
justify-content: left; |
|||
|
|||
.namepart { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 150%; |
|||
letter-spacing: normal; |
|||
/* 外部/Neutral/Black */ |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
|
|||
.company { |
|||
margin-top: 12rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 150%; |
|||
letter-spacing: normal; |
|||
/* 外部/Neutral/Grey 2 */ |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.titlebox { |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
display: inline-flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.text { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.more { |
|||
font-family: Source Han Sans; |
|||
font-size: 22rpx; |
|||
font-weight: 300; |
|||
line-height: normal; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007FFF; |
|||
} |
|||
} |
|||
|
|||
.xzs { |
|||
width: 192rpx; |
|||
height: 108rpx; |
|||
position: fixed; |
|||
right: -24rpx; |
|||
top: 70%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<u-navbar title="金融帮" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#2a98ff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx" bgColor="#FFFFFF"></u-search> |
|||
|
|||
<view class="main"> |
|||
<view class="ztone" v-for="(item,index) in ztList" :key="index" @click="godetail(item.id)"> |
|||
<image style="width: 150rpx;height: 150rpx;border-radius: 28rpx;flex: 1;" :src="item.img" mode=""> |
|||
</image> |
|||
<view class="rightpart"> |
|||
<view class="splace"> |
|||
{{item.splace}} |
|||
</view> |
|||
<view class="titlepart"> |
|||
<text class="title">{{item.title}}</text> |
|||
<image style="width: 32rpx;height: 44rpx;" src="@/static/img/Icon.png" mode="aspectFill"> |
|||
</image> |
|||
</view> |
|||
<view class="ms"> |
|||
{{item.ms}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
|
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
|
|||
|
|||
const search = (val) => { |
|||
console.log(val); |
|||
} |
|||
|
|||
const clickIcon = () => { |
|||
console.log(keyword.value); |
|||
} |
|||
|
|||
const ztList = ref([{ |
|||
id: 0, |
|||
img: '/static/img/image.png', |
|||
title: '这是一个标题', |
|||
time: '2025-04-16', |
|||
splace: '内蒙古数心科技', |
|||
ms: '描述描述描述描述描述描述' |
|||
}, |
|||
{ |
|||
id: 1, |
|||
img: '/static/img/image.png', |
|||
title: '这是一个标题', |
|||
time: '2025-04-16', |
|||
splace: '内蒙古数心科技', |
|||
ms: '描述描述描述描述描述描述' |
|||
} |
|||
]) |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/jrbDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
|
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: calc(100vh - 178rpx); |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
|
|||
.main { |
|||
margin-top: 10rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
max-height: 79vh; |
|||
overflow-y: auto; |
|||
|
|||
.ztone { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 210rpx; |
|||
margin-top: 30rpx; |
|||
padding: 30rpx; |
|||
border-radius: 20rpx; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid rgba(0, 127, 255, 0.12); |
|||
|
|||
.rightpart { |
|||
width: 100%; |
|||
margin-left: 40rpx; |
|||
flex: 3; |
|||
display: grid; |
|||
|
|||
.titlepart { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-family: Poppins; |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
line-height: 34rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Dark/Base 1 */ |
|||
color: #161719; |
|||
margin-top: 13rpx; |
|||
} |
|||
} |
|||
|
|||
.splace { |
|||
font-family: Poppins; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
line-height: 34rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Dark/Base 1 */ |
|||
color: #161719; |
|||
} |
|||
|
|||
.ms { |
|||
margin-top: 13rpx; |
|||
font-family: Poppins; |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Light/Base 3 */ |
|||
color: #91919F; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,36 @@ |
|||
<template> |
|||
<u-navbar :title="'互动专区'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<u-tabs :list="list1" @click="click"></u-tabs> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 创建响应式数据 |
|||
const list1 = reactive([{ |
|||
name: '小店帮' |
|||
}, |
|||
{ |
|||
name: '金融帮' |
|||
}, |
|||
{ |
|||
name: '媒体帮' |
|||
}, |
|||
{ |
|||
name: '企业帮' |
|||
} |
|||
]); |
|||
|
|||
// 定义方法 |
|||
function click(item) { |
|||
console.log('item', item); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #F1F3F9; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<u-navbar :title="'金融帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">产品说明</text> |
|||
</view> |
|||
<image style="width: 100%;height: 286rpx;margin-top: 40rpx;" src="@/static/img/Bitmap.png" mode=""></image> |
|||
<text class="message">说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</text> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">联系方式</text> |
|||
</view> |
|||
<view class="people"> |
|||
<text class="text">大聪明 13012345678</text> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">微信二维码</text> |
|||
</view> |
|||
<image style="width: 338rpx;height: 338rpx;margin-top: 28rpx;margin-left: 24%;" src="@/static/img/lj1.png" mode=""></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
|
|||
onLoad((param) => { |
|||
console.log(param); |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon{ |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<u-navbar :title="'媒体帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<image style="width: 100%;height: 300rpx;" src="@/static/img/ztback.png" mode=""></image> |
|||
<view class="main"> |
|||
<view class="head"> |
|||
<image class="toux" src="@/static/img/Frame.png" mode=""></image> |
|||
<text class="name">多余和毛毛姐</text> |
|||
<text class="type">抖音带货达人</text> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">助企案例</text> |
|||
</view> |
|||
<text class="message">说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</text> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">联系方式</text> |
|||
</view> |
|||
<view class="people"> |
|||
<text class="text">13012345678</text> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">微信二维码</text> |
|||
</view> |
|||
<image style="width: 338rpx;height: 338rpx;margin-top: 28rpx;margin-left: 24%;" src="@/static/img/lj1.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
|
|||
onLoad((param) => { |
|||
console.log(param); |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
.main { |
|||
width: 100%; |
|||
margin-top: -200rpx; |
|||
.head { |
|||
width: 100%; |
|||
display: grid; |
|||
justify-items: center; |
|||
.toux { |
|||
width: 316rpx; |
|||
height: 316rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 50%; |
|||
/* White */ |
|||
border: 8rpx solid #FFFFFF; |
|||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(101, 101, 101, 0.15); |
|||
} |
|||
.name { |
|||
margin-top: 32rpx; |
|||
font-family: Inter; |
|||
font-size: 60rpx; |
|||
font-weight: 520; |
|||
line-height: 84rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
.type { |
|||
margin-top: 4rpx; |
|||
font-family: Inter; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
.content { |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
} |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon{ |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,223 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<u-navbar title="媒体帮" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#a4c7ff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search> |
|||
<view class="mtlist"> |
|||
<view class="mtone" v-for="(item,index) in mtList" :key="index" @click="gomtbdetail(item.name)"> |
|||
<view class="headpart"> |
|||
<u-avatar :src="item.img" size="44"></u-avatar> |
|||
<view class="right"> |
|||
<text class="name">{{item.name}}</text> |
|||
<image style="width: 110rpx;height: 40rpx;margin-top: 8rpx;" src="@/static/img/mtype.png" |
|||
mode=""></image> |
|||
</view> |
|||
</view> |
|||
<image style="width: 100%;height: 400rpx;margin-top: 30rpx;" src="@/static/img/Bitmap.png" mode=""> |
|||
</image> |
|||
<view class="bottompart"> |
|||
<view class="part"> |
|||
<image style="width: 22rpx;height: 24rpx;" src="@/static/img/dh.png" mode=""></image> |
|||
<text class="text">{{item.number}}</text> |
|||
</view> |
|||
<view class="part"> |
|||
<image style="width: 22rpx;height: 24rpx;" src="@/static/img/yx.png" mode=""></image> |
|||
<text class="text">{{item.emil}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="fbxxbutton"> |
|||
<view class="button" @click="gofbxx"> |
|||
发布信息 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
|
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
|
|||
|
|||
const search = (val) => { |
|||
console.log(val); |
|||
} |
|||
|
|||
const clickIcon = () => { |
|||
console.log(keyword.value); |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
const mtList = ref([{ |
|||
img: '/static/img/Bitmap.png', |
|||
name: '多余和毛毛姐', |
|||
number: '+86 13012345678', |
|||
emil: 'sxkjqq.com' |
|||
}, |
|||
{ |
|||
img: '/static/img/Bitmap.png', |
|||
name: '多余和毛毛姐', |
|||
number: '+86 13012345678', |
|||
emil: 'sxkjqq.com' |
|||
}, |
|||
{ |
|||
img: '/static/img/Bitmap.png', |
|||
name: '多余和毛毛姐', |
|||
number: '+86 13012345678', |
|||
emil: 'sxkjqq.com' |
|||
}, |
|||
{ |
|||
img: '/static/img/Bitmap.png', |
|||
name: '多余和毛毛姐', |
|||
number: '+86 13012345678', |
|||
emil: 'sxkjqq.com' |
|||
} |
|||
]) |
|||
|
|||
const gomtbdetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mediaDetail?id='+id |
|||
}) |
|||
} |
|||
|
|||
const gofbxx = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mtbmakeMessage' |
|||
}) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
|
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(62, 146, 249, 0.2) 88%); |
|||
width: 100%; |
|||
overflow: hidden; |
|||
.mtlist { |
|||
margin-top: 8rpx; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
height: 100vh; |
|||
max-height: calc(100vh - 336rpx); |
|||
padding-bottom: 168rpx; |
|||
|
|||
.mtone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
height: 666rpx; |
|||
border-radius: 24rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
padding: 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.headpart { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.right { |
|||
margin-left: 16rpx; |
|||
display: grid; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 350; |
|||
line-height: 43.2rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: capitalize; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottompart { |
|||
margin-top: 26rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.part { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.text { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
line-height: 33.6rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: capitalize; |
|||
letter-spacing: normal; |
|||
color: #606266; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
|
|||
.fbxxbutton { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
background: #FFFFFF; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.button { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<u-navbar :title="'媒体帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<view class="formlist"> |
|||
|
|||
</view> |
|||
<view class="sumitbotton"> |
|||
<view class="button"> |
|||
确认提交 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
|
|||
.formlist { |
|||
width: 100%; |
|||
height: calc(100vh - 346rpx); |
|||
background: #e9ecf3; |
|||
padding: 40rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.sumitbotton { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
background: #FFFFFF; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
|
|||
.button { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<u-navbar title="小店帮" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#a4c7ff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search> |
|||
<zh-scroll ref="zhscrollRel" :scrollList="goods" :searchVal="keyword"></zh-scroll> |
|||
</view> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
import zhScroll from '@/components/zh-scroll/zh-scroll.vue'; |
|||
import goodsList from "@/mock/good.ts"; |
|||
|
|||
const zhscrollRel = ref(null) |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
|
|||
const goods = ref([]); |
|||
|
|||
const search = (val) => { |
|||
console.log(val); |
|||
zhscrollRel.value.searchleMenuTap(keyword.value) |
|||
} |
|||
|
|||
const clickIcon = () => { |
|||
console.log(keyword.value); |
|||
zhscrollRel.value.searchleMenuTap(keyword.value) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
queryList().then(res => { |
|||
goods.value = res; |
|||
}) |
|||
}) |
|||
|
|||
|
|||
|
|||
function queryList() { |
|||
return new Promise(resolve => { |
|||
setTimeout(() => { |
|||
resolve(goodsList); |
|||
}, 400) |
|||
}) |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 254rpx); |
|||
width: 100%; |
|||
.cate-tab { |
|||
height: calc(100vh - 254rpx); |
|||
} |
|||
} |
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<u-navbar :title="'小店帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true"/> |
|||
<view class="container"> |
|||
<text class="title">个体工商户变更</text> |
|||
<text class="fbr">发布人:杭州市民个协会</text> |
|||
<view class="readtime"> |
|||
<text class="time">2024-08-29 20:27</text> |
|||
<view class="readnum"> |
|||
阅读量：<text class="num">2</text> |
|||
</view> |
|||
</view> |
|||
<view class="nrxq"> |
|||
<view class="icon"> |
|||
|
|||
</view> |
|||
<text class="nrtitle">内容详情</text> |
|||
</view> |
|||
<view class="message"> |
|||
线上办理 |
|||
1、办理流程: |
|||
申请人通过浙江省政务服务网、“浙里办"APP中请，浙江政务服务网一登陆后申报-选择所在区县搜索"个体工商户变更登记”关键词，并提交相关电子申请材料进行办理， |
|||
2、需提交材料: |
|||
(1)经营者签署的《个体工商户变更登记申请书》原件及经营者身份证明复印件; |
|||
(2)营业执照正、副本原件。 |
|||
线下办理 |
|||
1、办理流程: |
|||
(1)申请:申请人向登记(发照)机关窗口提交申请材料; |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
const titletxt = ref('名特优新') |
|||
|
|||
|
|||
onLoad((param) => { |
|||
console.log(param); |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 60rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.fbr { |
|||
margin-top: 28rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.readtime { |
|||
margin-top: 28rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.readnum { |
|||
display: flex; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 阅读量: */ |
|||
color: #858494; |
|||
|
|||
.num { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 2 */ |
|||
color: #007FFF; |
|||
} |
|||
} |
|||
} |
|||
.nrxq { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 60rpx; |
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.nrtitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 40rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,428 @@ |
|||
<template> |
|||
<u-navbar :title="'“'+titletxt+'”'+'专题'" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<view class="headpart"> |
|||
<view class="lefttxt"> |
|||
<text class="title"> |
|||
<text class="headtet">"名特优新"</text> |
|||
个体工商户 |
|||
</text> |
|||
<text class="text">#专属认证标识#</text> |
|||
</view> |
|||
<image style="width: 298rpx;height: 160rpx;" src="@/static/img/zticon.png" mode=""></image> |
|||
</view> |
|||
<view class="main"> |
|||
<u-box height="400rpx" gap="24rpx"> |
|||
<template #left> |
|||
<view class="leftmk"> |
|||
<view class="top"> |
|||
<text class="title">这是一个标题 ></text> |
|||
<text class="text">内蒙古数心科技</text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<text class="ms">描述描述描述描述描述描述</text> |
|||
<text class="time">2025-04-16</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template #rightTop> |
|||
<view class="rightTopmk"> |
|||
<view class="top"> |
|||
<text class="title">这是一个标题 ></text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<text class="ms">描述描述描述描述描述描述</text> |
|||
<text class="time">2025-04-16</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template #rightBottom> |
|||
<view class="rightBottommk"> |
|||
<view class="top"> |
|||
<text class="title">这是一个标题 ></text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<text class="ms">描述描述描述描述描述描述</text> |
|||
<text class="time">2025-04-16</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</u-box> |
|||
<view class="ztlist"> |
|||
<view class="ztone" v-for="(item,index) in ztList" :key="index" @click="godetail(item.id)"> |
|||
<image style="width: 112rpx;height: 112rpx;border-radius: 20rpx;flex: 1;" :src="item.img" mode=""></image> |
|||
<view class="rightpart"> |
|||
<view class="titlepart"> |
|||
<text class="title">{{item.title}}</text> |
|||
<text class="time">{{item.time}}</text> |
|||
</view> |
|||
<view class="splace"> |
|||
{{item.splace}} |
|||
</view> |
|||
<view class="ms"> |
|||
{{item.ms}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
|
|||
const titletxt = ref('名特优新') |
|||
|
|||
const ztList = ref([ |
|||
{ |
|||
id: 0, |
|||
img: '/static/img/image.png', |
|||
title: '这是一个标题', |
|||
time: '2025-04-16', |
|||
splace: '内蒙古数心科技', |
|||
ms: '描述描述描述描述描述描述' |
|||
}, |
|||
{ |
|||
id: 1, |
|||
img: '/static/img/image.png', |
|||
title: '这是一个标题', |
|||
time: '2025-04-16', |
|||
splace: '内蒙古数心科技', |
|||
ms: '描述描述描述描述描述描述' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
img: '/static/img/image.png', |
|||
title: '这是一个标题', |
|||
time: '2025-04-16', |
|||
splace: '内蒙古数心科技', |
|||
ms: '描述描述描述描述描述描述' |
|||
} |
|||
]) |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/ztdetail?id='+id |
|||
}) |
|||
} |
|||
onLoad((param) => { |
|||
console.log(param); |
|||
}) |
|||
|
|||
const leftClick = () => { |
|||
uni.navigateBack() |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #F1F3F9; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
|
|||
.headpart { |
|||
width: 100%; |
|||
height: 380rpx; |
|||
background-image: url('@/static/img/ztback.png'); |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.lefttxt { |
|||
display: grid; |
|||
justify-items: center; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 150%; |
|||
text-align: center; |
|||
display: flex; |
|||
white-space: nowrap; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
|
|||
.headtet { |
|||
font-family: Source Han Sans; |
|||
font-size: 44rpx; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 42rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 76rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
text-decoration: underline; |
|||
text-decoration-color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.main { |
|||
margin-top: -60rpx; |
|||
border-radius: 40rpx 40rpx 0rpx 0rpx; |
|||
background: #FFFFFF; |
|||
width: 100%; |
|||
height: 69vh; |
|||
padding: 40rpx 24rpx 0 24rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.leftmk { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 16rpx; |
|||
background-image: url(@/static/img/lj1.png); |
|||
background-size: 100% 100%; |
|||
display: grid; |
|||
align-content: space-between; |
|||
padding: 36rpx 20rpx 24rpx 20rpx; |
|||
box-sizing: border-box; |
|||
.top { |
|||
display: grid; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
} |
|||
.bottom{ |
|||
display: grid; |
|||
.ms { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: rgba(254, 254, 254, 0.6); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.rightTopmk { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 16rpx; |
|||
background-image: url(@/static/img/lj2.png); |
|||
background-size: 100% 100%; |
|||
display: grid; |
|||
align-content: space-between; |
|||
padding: 36rpx 20rpx 24rpx 20rpx; |
|||
box-sizing: border-box; |
|||
.top { |
|||
display: grid; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
} |
|||
.bottom{ |
|||
display: grid; |
|||
.ms { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: rgba(254, 254, 254, 0.6); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.rightBottommk { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 16rpx; |
|||
background-image: url(@/static/img/lj3.png); |
|||
background-size: 100% 100%; |
|||
display: grid; |
|||
align-content: space-between; |
|||
padding: 36rpx 20rpx 24rpx 20rpx; |
|||
box-sizing: border-box; |
|||
.top { |
|||
display: grid; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
} |
|||
.bottom{ |
|||
display: grid; |
|||
.ms { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FEFEFE; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: rgba(254, 254, 254, 0.6); |
|||
} |
|||
} |
|||
} |
|||
.ztlist { |
|||
max-height: 40vh; |
|||
overflow-y: auto; |
|||
.ztone { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 40rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 2rpx solid #F2F0F0; |
|||
.rightpart { |
|||
width: 100%; |
|||
margin-left: 16rpx; |
|||
flex: 5; |
|||
display: grid; |
|||
.titlepart { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: rgba(133, 132, 148, 0.8); |
|||
} |
|||
} |
|||
.splace { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.ms { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,201 @@ |
|||
<template> |
|||
<view class="tabs-wrapper"> |
|||
<!-- 固定显示的'全部'标签 --> |
|||
<view |
|||
class="tab-item" |
|||
:class="{ 'active': activeTab === 'all' }" |
|||
@click="handleTabSelect('all')" |
|||
> |
|||
全部 |
|||
</view> |
|||
|
|||
<!-- 主显示区域 --> |
|||
<!-- <scroll-view |
|||
scroll-x="true" |
|||
class="scroll-container" |
|||
:scroll-left="scrollLeft" |
|||
> --> |
|||
<view |
|||
v-for="(tab, index) in visibleTabs" |
|||
:key="tab.id" |
|||
class="tab-item" |
|||
:class="{ 'active': activeTab === tab.id }" |
|||
@click="handleTabSelect(tab.id)" |
|||
> |
|||
{{ tab.label }} |
|||
</view> |
|||
<!-- </scroll-view> --> |
|||
|
|||
<!-- 更多按钮及下拉菜单 --> |
|||
<view |
|||
v-if="showMoreButton" |
|||
class="tab-item" |
|||
@click.stop="show=true" |
|||
> |
|||
<text>更多 {{ dropdownVisible ? '▲' : '▼' }}</text> |
|||
<u-picker :show="show" :columns="hiddenTabs" keyName="label" @cancel="show=false" @confirm="confirm"></u-picker> |
|||
<!-- <view |
|||
v-show="dropdownVisible" |
|||
class="dropdown-menu" |
|||
:style="{ right: dropdownRight + 'px' }" |
|||
> |
|||
<view |
|||
v-for="tab in hiddenTabs" |
|||
:key="tab.id" |
|||
class="dropdown-item" |
|||
:class="{ 'active': activeTab === tab.id }" |
|||
@click="handleTabSelect(tab.id)" |
|||
> |
|||
{{ tab.label }} |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, onMounted, onUnmounted } from 'vue' |
|||
import { onShow, onHide } from '@dcloudio/uni-app' |
|||
|
|||
const props = defineProps({ |
|||
tabsData: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['tabChange']) |
|||
|
|||
// 响应式状态 |
|||
const activeTab = ref('all') |
|||
const dropdownVisible = ref(false) |
|||
const dropdownRight = ref(0) |
|||
const containerWidth = ref(375) // 默认屏幕宽度 |
|||
const show = ref(false); |
|||
|
|||
// 计算属性 |
|||
const visibleTabs = computed(() => { |
|||
const filtered = props.tabsData.filter(t => t.id !== 'all') |
|||
return filtered.length <= 3 ? filtered : filtered.slice(0, 2) |
|||
}) |
|||
|
|||
const hiddenTabs = computed(() => { |
|||
const filtered = props.tabsData.filter(t => t.id !== 'all') |
|||
return [filtered.length > 3 ? filtered.slice(2) : []] |
|||
}) |
|||
|
|||
const showMoreButton = computed(() => props.tabsData.length > 3) |
|||
|
|||
// 事件处理 |
|||
const handleTabSelect = (tabId) => { |
|||
activeTab.value = tabId |
|||
dropdownVisible.value = false |
|||
emit('tabChange', tabId) |
|||
} |
|||
|
|||
const confirm = (tab) => { |
|||
emit('tabChange', tab.value[0].id) |
|||
show.value = false |
|||
} |
|||
|
|||
const toggleDropdown = () => { |
|||
if (!dropdownVisible.value) { |
|||
uni.getSystemInfo({ |
|||
success: (res) => { |
|||
containerWidth.value = res.windowWidth |
|||
dropdownRight.value = (res.windowWidth - 80) // 动态计算右侧位置 |
|||
} |
|||
}) |
|||
} |
|||
dropdownVisible.value = !dropdownVisible.value |
|||
} |
|||
|
|||
// 点击外部关闭下拉 |
|||
const handleClickOutside = (e) => { |
|||
if (!e.target.closest('.more-wrapper')) { |
|||
dropdownVisible.value = false |
|||
} |
|||
} |
|||
|
|||
// 生命周期 |
|||
onMounted(() => { |
|||
uni.getSystemInfoSync().windowWidth |
|||
document.addEventListener('click', handleClickOutside) |
|||
}) |
|||
|
|||
onUnmounted(() => { |
|||
document.removeEventListener('click', handleClickOutside) |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.tabs-wrapper { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 16rpx 0; |
|||
border-bottom: 1rpx solid #eee; |
|||
:last-child { |
|||
margin-right: 0 !important; |
|||
} |
|||
|
|||
.scroll-container { |
|||
flex: 1; |
|||
white-space: nowrap; |
|||
height: 80rpx; |
|||
} |
|||
|
|||
.tab-item { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
white-space: nowrap; |
|||
width: 25%; |
|||
box-sizing: border-box; |
|||
height: 60rpx; |
|||
padding: 0 42rpx; |
|||
margin-right: 38rpx; |
|||
border-radius: 124rpx; |
|||
background: #FFFFFF; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007FFF; |
|||
|
|||
&.active { |
|||
background: #007FFF; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.more-wrapper { |
|||
position: relative; |
|||
padding: 0 16rpx; |
|||
color: #666; |
|||
|
|||
.dropdown-menu { |
|||
position: absolute; |
|||
top: 100%; |
|||
min-width: 160rpx; |
|||
background: white; |
|||
border-radius: 8rpx; |
|||
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.1); |
|||
z-index: 999; |
|||
|
|||
.dropdown-item { |
|||
padding: 24rpx 32rpx; |
|||
font-size: 28rpx; |
|||
|
|||
&.active { |
|||
color: #007aff; |
|||
background: #f0f7ff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<u-navbar :title="'“'+titletxt+'”'+'专题'" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<image style="width: 8rpx;height: 38rpx;" src="@/static/img/Fill1.png" mode=""></image> |
|||
<image style="width: 8rpx;height: 38rpx;margin-left: 6rpx;" src="@/static/img/Fill2.png" mode=""></image> |
|||
<text class="title">这是详情标题标题标题</text> |
|||
</view> |
|||
<image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> |
|||
<view class="text">农业农村部农产品质量安全中心发布公告，公示2024年第二批全国名特优新农产品名录，辽宁省36个产品入选，其中大连6个，分别是大连油桃、旅顺大樱桃、长海香螺、长海鲍鱼、瓦房店闫店地瓜、庄河蓝莓。 农业农村部农产品质量安全中心发布公告，公示2024年第二批全国名特优新农产品名录，辽宁省36个产品入选，其中大连6个，分别是大连油桃、旅顺大樱桃、长海香螺、长海鲍鱼、瓦房店闫店地瓜、庄河蓝莓。 </view> |
|||
<view class="fbtime">1小时前</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
const titletxt = ref('名特优新') |
|||
|
|||
|
|||
onLoad((param) => { |
|||
console.log(param); |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 48rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
display: flex; |
|||
align-items: center; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
line-height: 56rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.text { |
|||
margin-top: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.fbtime { |
|||
margin-top: 32rpx; |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 42rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/SCMP Grey/nobel */ |
|||
/* 样式描述：06 Small Grey txt */ |
|||
color: #A1A1A1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,203 +1,13 @@ |
|||
<script setup lang="ts"> |
|||
import { getVoteResult } from '@/api/common' |
|||
const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params }) |
|||
const doSearch = (formData: { page: number; limit: number }, onSuccess: Function) => { |
|||
getVoteResult(formData).then((res) => { |
|||
const { data } = res as { data: { data: any; total: number } } |
|||
onSuccess({ data }) |
|||
}) |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<view class="electionList"> |
|||
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch"> |
|||
<template v-slot="{ row, index }"> |
|||
<view class="items" :uid="'items' + index"> |
|||
<view class="flex"> |
|||
<view class="flex1"> |
|||
<view class="flex-center-start"> |
|||
<text class="text-ellipsis title">{{ row.title }}</text> |
|||
<text class="status b" v-if="row.status === 2">进行中</text> |
|||
<text class="status f" v-else-if="row.status === 1">未开始</text> |
|||
<text class="status e" v-else>已结束</text> |
|||
</view> |
|||
<view class="time">{{ `投票时间：${row.start_time} 至 ${row.end_time}` }}</view> |
|||
</view> |
|||
<view :class="{ arrow: true, active: row.showInfo }" @click="row.showInfo = !row.showInfo"> |
|||
<u-icon name="arrow-down" color="#9CA3AF" /> |
|||
</view> |
|||
</view> |
|||
<view class="info" v-if="row.showInfo"> |
|||
<view class="flex info-items" v-for="(v, k) of row.candidate" :key="k"> |
|||
<view class="head"> |
|||
<image :src="v.photo" mode="aspectFill" /> |
|||
</view> |
|||
<view class="content flex1"> |
|||
<view class="name flex-center-start"> |
|||
<text>{{ v.name }}</text> |
|||
<text class="status" v-if="v.vote_result == 1">当选</text> |
|||
<text class="status un" v-else>未当选</text> |
|||
</view> |
|||
<view class="votes">得票数：{{ v.agree_num }}</view> |
|||
</view> |
|||
|
|||
<view class="progress"> |
|||
<u-line-progress :percentage="v.agree_percent" height="8rpx" active-color="#2563EB" :show-text="false" /> |
|||
<view class="progress-text">{{ v.agree_percent }}%</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="info-bts" v-if="row.status === 3" @click.stop="navto('pages/electionList/info', { id: row.id })"> |
|||
查看投票详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</ex-list> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.electionList { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
box-sizing: border-box; |
|||
padding: 32rpx; |
|||
background-color: #f9fafb; |
|||
|
|||
.items { |
|||
padding: 32rpx; |
|||
border-radius: 12px; |
|||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
|||
box-sizing: border-box; |
|||
border: 1px solid #f3f4f6; |
|||
box-shadow: |
|||
0px 1px 2px -1px rgba(0, 0, 0, 0.1), |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 32rpx; |
|||
|
|||
.text-ellipsis { |
|||
overflow: hidden; |
|||
white-space: noraml; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.title { |
|||
color: #000; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 48rpx; |
|||
} |
|||
|
|||
.status { |
|||
font-size: 24rpx; |
|||
border-radius: 20rpx; |
|||
padding: 0 16rpx; |
|||
margin-left: 16rpx; |
|||
white-space: nowrap; |
|||
|
|||
&.b { |
|||
color: #fff; |
|||
background-color: #2563eb; |
|||
} |
|||
|
|||
&.f { |
|||
color: #6b7280; |
|||
background-color: #e5e7eb; |
|||
} |
|||
|
|||
&.e { |
|||
color: #fff; |
|||
background-color: #ef4444; |
|||
} |
|||
} |
|||
|
|||
.time { |
|||
padding-top: 8rpx; |
|||
color: #6b7280; |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.arrow { |
|||
transition: 0.3s all ease-in; |
|||
|
|||
&.active { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
|
|||
.info { |
|||
&-items { |
|||
margin-top: 32rpx; |
|||
|
|||
.head { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
background-color: #6b7280; |
|||
margin-right: 24rpx; |
|||
} |
|||
|
|||
.content { |
|||
height: min-content; |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 40rpx; |
|||
color: #000000; |
|||
|
|||
.status { |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
border-radius: 999rpx; |
|||
padding: 8rpx 24rpx; |
|||
line-height: 20rpx; |
|||
color: #2563eb; |
|||
background: rgba(37, 99, 235, 0.1); |
|||
|
|||
&.un { |
|||
color: #f44336; |
|||
background: rgba(244, 67, 54, 0.1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.votes { |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
color: #6b7280; |
|||
} |
|||
} |
|||
|
|||
.progress { |
|||
width: 192rpx; |
|||
height: min-content; |
|||
|
|||
&-text { |
|||
padding-top: 8rpx; |
|||
color: #6b7280; |
|||
font-size: 24rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-bts { |
|||
padding: 16rpx; |
|||
margin: 48rpx 0 24rpx; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 42rpx; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
background-color: #2563eb; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 353 KiB |
|
After Width: | Height: | Size: 116 B |
|
After Width: | Height: | Size: 116 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 324 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 592 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 541 B |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 718 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 547 B |
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in new issue