1282 lines
29 KiB
Vue
1282 lines
29 KiB
Vue
<template>
|
||
<view>
|
||
<view class="page-title">校友圈</view>
|
||
<view class="content-top">
|
||
|
||
|
||
<!-- <u-navbar :is-back="false" title="" :border-bottom="false">
|
||
<view class="slot-wrap">
|
||
<u-search :input-style="searchStyle" placeholder="搜索资讯或需求" search-icon="search" :show-action="true"
|
||
action-text="搜索" v-model="Title" @custom="onSearch">
|
||
</u-search>
|
||
</view>
|
||
</u-navbar> -->
|
||
<drag-button :isDock="true" :current='current' :existTabBar="true" @reload='reload' />
|
||
<!-- <u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="false"
|
||
:active-item-style="{ color: '#3CB5FB', fontSize: '0.15rem' }" :bar-style="{ background: '#3CB5FB' }"
|
||
@change="tabsChange"></u-tabs-swiper> -->
|
||
<view class="tabs-wrap">
|
||
|
||
<view class="tabs-box">
|
||
<view class="tabs-item" :class="{ 'tabs-item-active': current == item.type }"
|
||
v-for="(item, index) in navList" :key="index" @click="tabsChange(item.type)">
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="search-box" @click="searchClick">
|
||
<image src="/static/common/img/search.svg" style="width: 40rpx;height: 40rpx;"></image>
|
||
</view>
|
||
<view class="search-box" @click="btnClick"
|
||
v-if="(current == 0 && vuex_user.isAttestationGLY && vuex_user.isAttestationJZG && (vuex_user.isAttestationXY || true)) || (current == 1 && (vuex_user.isAttestationXY || true))">
|
||
<image src="/static/common/img/add.svg" style="width: 50rpx;height: 50rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row section_5" :class="{ NavShow: NavShow }" v-if="current == 1">
|
||
<text :class="{ 'text_3': currentIdx === index }" v-for="(item, index) in sysList" :key="index"
|
||
@click="oncurrent(index, item)">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
|
||
style="height: calc(100vh - 410rpx); width: 100%">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
|
||
style="height: calc(100vh - 410rpx); width: 100%">
|
||
<scroll-view scroll-y="true" style=" width: 100%"
|
||
:style="{ height: vuex_iPhone ? 'calc(100vh - 410rpx)' : 'calc(100vh - 1.5rem)' }"
|
||
@scrolltolower="onreachBottom" scroll-with-animation='true'
|
||
:scroll-top='index == 0 ? isScroll : isScroll2' @scroll='scroll' :data-index='index'>
|
||
<view class="flex-col group" v-if="index == 0">
|
||
<view class="flex-col" v-if="(state === false) && false">
|
||
<view class="flex-col group_1"> </view>
|
||
<view class="flex-col group_2">
|
||
<view class="flex-col section_4">
|
||
<view class="flex-row section_5">
|
||
<text class="text_3">待认证，请先完成认证~</text>
|
||
<text class="text_4" @click="onAuto">去认证 >></text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group_3">
|
||
<view class="flex-col">
|
||
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
|
||
</view>
|
||
<text class="text_5">暂无数据，请尽快认证补充资料~</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="(state === true) && true">
|
||
<!-- <view class="flex-col xyzz" v-if='Alumn.length'>
|
||
<view class="flex-col group_3">
|
||
<view class="flex-col">
|
||
<view class="flex-row group_4">
|
||
<view>
|
||
<image src="/static/common/img/16486275579950463634.png"
|
||
class="image_2" />
|
||
<text class="text_3">校友找找</text>
|
||
</view>
|
||
<text style='float:right;' @click='toAlumni()'>更多</text>
|
||
</view>
|
||
<view class="group_23">
|
||
<view class="flex-row horiz-list">
|
||
<view class="flex-col items-center list-item_2" :key="idx"
|
||
v-for="(item, idx) in Alumn" v-if='idx < 5'
|
||
@click='toDetil(item.userId)'>
|
||
<u-avatar :src="$u.http.config.imgUrl + item.imageUrl"
|
||
class="image_3"></u-avatar>
|
||
<text class="text_4">{{ handleStr(item) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="info-item"> -->
|
||
|
||
<information @clickImg="clickImg" @onStar="onStar" :list="shoolList" type="0"
|
||
:bottom="bottomState2" :borderRadius="true"></information>
|
||
<!-- </view> -->
|
||
</template>
|
||
</view>
|
||
<view class="flex-col group" v-if="index == 1">
|
||
<view class="flex-col" v-if="(state === false) && false">
|
||
<view class="flex-col group_1"> </view>
|
||
<view class="flex-col group_2">
|
||
<view class="flex-col section_4">
|
||
<view class="flex-row section_5">
|
||
<text class="text_3">待认证，请先完成认证~</text>
|
||
<text class="text_4" @click="onAuto">去认证 >></text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group_3">
|
||
<view class="flex-col">
|
||
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
|
||
</view>
|
||
<text class="text_5">暂无数据，请尽快认证补充资料~</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="(state === true) && true">
|
||
<view class="flex-col group_18">
|
||
<view class="flex-col group_17">
|
||
<u-sticky offset-top="85" @fixed="onFixed"> </u-sticky>
|
||
<u-sticky offset-top="84" @unfixed="onFixed"> </u-sticky>
|
||
|
||
<!-- <view class="info-item"> -->
|
||
|
||
<information @onStar="onStar" @clickImg="clickImg" :list="helpList" type="1"
|
||
:bottom="bottomState" @onSign="onSign" :borderRadius="true">
|
||
</information>
|
||
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<u-toast ref="uToast" />
|
||
<u-tabbar :list="vuex_tabbar" :class="{ phone: vuex_iPhone }" :active-color="vuex_tabbar_config.activeColor"
|
||
:inactive-color="vuex_tabbar_config.inactiveColor"></u-tabbar>
|
||
|
||
<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dragButton from '../../../components/drag-button';
|
||
import information from "../../../components/Information.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
scrollTop: 0,
|
||
isScroll: 0,
|
||
isScroll2: 0,
|
||
// 状态
|
||
state: false,
|
||
NavShow: false,
|
||
searchStyle: {
|
||
width: "100%",
|
||
},
|
||
sysList: ['全部', '企业招聘', '租房', '生活', '找工作', '其他'],
|
||
tabbar: "",
|
||
swiperCurrent: 0,
|
||
current: 0,
|
||
navList: [
|
||
{
|
||
name: "学校资讯",
|
||
type: 0
|
||
},
|
||
{
|
||
name: "校友帮帮",
|
||
type: 1
|
||
}
|
||
],
|
||
PageIndex: 1,
|
||
PageSize: 10,
|
||
PageIndex2: 1,
|
||
PageSize2: 10,
|
||
Keyword: "",
|
||
DateBegin: "",
|
||
DateEnd: "",
|
||
SkipCount: "",
|
||
helpList: [],
|
||
shoolList: [],
|
||
Alumn: [],
|
||
total1: 0,
|
||
total2: 0,
|
||
currentIdx: 0,
|
||
Keyword: '全部',
|
||
Title: "",
|
||
isonShow: true,
|
||
isLoad: false,
|
||
bottomState: false,
|
||
bottomState2: false,
|
||
isShool: '',
|
||
};
|
||
},
|
||
watch: {
|
||
isShool() {
|
||
this.bottomState = false,
|
||
this.bottomState2 = false,
|
||
this.helpList = []
|
||
this.shoolList = []
|
||
this.getList();
|
||
},
|
||
current() {
|
||
//改成切换就刷新
|
||
//if ((this.helpList.length == 0 && this.current == 1) || (this.shoolList.length == 0 && this.current == 0)) {
|
||
//}
|
||
this.getList();
|
||
},
|
||
currentIdx() {
|
||
this.getList();
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
console.log('%c%s', 'color:red', 'onLoad--校友圈')
|
||
this.getList();
|
||
// this.getAlumnSearch();
|
||
|
||
|
||
},
|
||
onShow(e) {
|
||
//从我的界面点击回来
|
||
uni.$off('circle')
|
||
uni.$on('circle', () => {
|
||
console.log('circle')
|
||
// 获取当前页面的路径
|
||
let pages = getCurrentPages();
|
||
let currentPage = pages[pages.length - 1];
|
||
let url = '/' + currentPage.route;
|
||
uni.reLaunch({ url: url, });
|
||
})
|
||
// console.log('%c%s', 'color:red', 'onShow--校友圈')
|
||
// console.log(this.isonShow, 'this.isonShow--')
|
||
if (this.isonShow) {
|
||
if (uni.getStorageSync('Tag')) {
|
||
const value = uni.getStorageSync('Tag');
|
||
// this.current = 0
|
||
// this.swiperCurrent = 0
|
||
this.current = 1
|
||
this.swiperCurrent = 1
|
||
let arr = value.split(',')
|
||
let i = this.sysList.indexOf(arr[0])
|
||
this.oncurrent(i, arr[0])
|
||
uni.removeStorageSync('Tag');
|
||
} else {
|
||
// this.getList()
|
||
}
|
||
this.$u.api.getUser()
|
||
this.getList();
|
||
this.getAlumnSearch()
|
||
// this.getShoolList()
|
||
// this.state = this.vuex_user.isAttestationXY || this.vuex_user.isAttestationJZG;
|
||
this.state = true;
|
||
}
|
||
|
||
//this.isShool = this.vuex_user.schoolId
|
||
this.getSchool()
|
||
uni.$on('helpAdd', () => {
|
||
console.log('helpAdd回调')
|
||
// this.gethelpList();
|
||
this.reload();
|
||
})
|
||
},
|
||
methods: {
|
||
|
||
|
||
handleStr(item) {
|
||
if (item.name?.length && item.name?.length > 3) {
|
||
return item.name?.slice(0, 3) + "..."
|
||
}
|
||
return item.name
|
||
},
|
||
async getSchool() {
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
};
|
||
const res = await this.$u.apiList.MyEducations(req);
|
||
// console.log(res, 'res---');
|
||
const findRow = res.find(x => x.isSelected === true)
|
||
if (findRow) {
|
||
this.isShool = findRow.schoolId
|
||
}
|
||
// console.log(this.isShool, 'this.isShool--')
|
||
},
|
||
// 刷新
|
||
reload() {
|
||
this.getList()
|
||
},
|
||
// 获取笑友找找
|
||
getAlumnSearch() {
|
||
this.$u.api.getAlumnSearch().then(res => {
|
||
this.Alumn = res
|
||
})
|
||
},
|
||
oncurrent(index, item) {
|
||
if (this.Keyword != item) {
|
||
this.helpList = []
|
||
this.Keyword = item
|
||
this.currentIdx = index
|
||
this.Title = ""
|
||
this.PageIndex = 1
|
||
this.PageSize = 10
|
||
// if (!uni.getStorageSync('Tag')) {
|
||
// console.log('没有缓存')
|
||
// this.gethelpList()
|
||
// }
|
||
}
|
||
},
|
||
onSearch(val) {
|
||
this.Title = val
|
||
if (this.current == 0) {
|
||
this.shoolList = []
|
||
this.getShoolList()
|
||
} else {
|
||
this.helpList = []
|
||
this.gethelpList()
|
||
}
|
||
},
|
||
scroll(e) {
|
||
this.scrollTop = e.detail.scrollTop;
|
||
},
|
||
onFixed() {
|
||
this.NavShow = !this.NavShow;
|
||
},
|
||
// 获取校友帮帮列表
|
||
gethelpList() {
|
||
this.isLoad = true
|
||
const data = {
|
||
PageIndex: this.PageIndex,
|
||
PageSize: this.PageSize,
|
||
Keyword: this.Keyword,
|
||
// DateBegin:'',
|
||
// DateEnd:'',
|
||
// SkipCount:1,
|
||
// key:,
|
||
};
|
||
if (this.Keyword != '全部') {
|
||
data.Keyword = this.Keyword
|
||
}
|
||
if (this.Title) {
|
||
// this.helpList = []
|
||
data.Title = this.Title
|
||
}
|
||
|
||
this.$u.api.GetHelpList(data).then((res) => {
|
||
console.log(res, 'res--帮帮列表')
|
||
this.isLoad = false
|
||
this.total2 = res.total
|
||
if (this.helpList.length >= this.total2) {
|
||
this.bottomState = true;
|
||
return
|
||
}
|
||
if (this.total2 == res.items.length) {
|
||
this.bottomState = true;
|
||
}
|
||
this.helpList.push(...res.items)
|
||
|
||
});
|
||
},
|
||
// 获取学校资讯列表
|
||
getShoolList() {
|
||
const data = {
|
||
PageIndex: this.PageIndex2,
|
||
PageSize: this.PageSize2,
|
||
// Keyword:this.Keyword,
|
||
// DateBegin:'',
|
||
// DateEnd:'',
|
||
// SkipCount:1,
|
||
// key:,
|
||
};
|
||
if (this.Title) {
|
||
// this.shoolList = []
|
||
data.Title = this.Title
|
||
}
|
||
this.$u.api.GetSchoolList(data).then((res) => {
|
||
this.total1 = res.total
|
||
if (this.shoolList.length >= this.total1) {
|
||
this.bottomState2 = true;
|
||
return
|
||
}
|
||
if (this.total1 == res.items.length) {
|
||
this.bottomState2 = true;
|
||
}
|
||
this.shoolList.push(...res.items)
|
||
});
|
||
},
|
||
getList() {
|
||
if (this.current == 0) {
|
||
this.shoolList = []
|
||
this.PageIndex2 = 1
|
||
this.PageSize2 = 10
|
||
this.getShoolList();
|
||
} else {
|
||
this.helpList = []
|
||
this.PageIndex = 1
|
||
this.PageSize = 10
|
||
if (!this.isLoad) {
|
||
this.gethelpList();
|
||
}
|
||
}
|
||
},
|
||
// tabs通知swiper切换
|
||
tabsChange(index) {
|
||
this.swiperCurrent = index;
|
||
this.current = index
|
||
this.Title = ""
|
||
},
|
||
// swiper-item左右移动，通知tabs的滑块跟随移动
|
||
transition(e) {
|
||
let dx = e.detail.dx;
|
||
// this.$refs.uTabs.setDx(dx);
|
||
},
|
||
// 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
|
||
// swiper滑动结束，分别设置tabs和swiper的状态
|
||
animationfinish(e) {
|
||
let current = e.detail.current;
|
||
console.log(current, 'current--');
|
||
|
||
// this.$refs.uTabs.setFinishCurrent(current);
|
||
this.swiperCurrent = current;
|
||
this.current = current;
|
||
},
|
||
// scroll-view到底部加载更多
|
||
onreachBottom() {
|
||
let num = this.PageIndex * this.PageSize
|
||
let num1 = this.PageIndex2 * this.PageSize2
|
||
if (this.current == 0) {
|
||
if (num1 >= this.total1) {
|
||
this.bottomState2 = true;
|
||
return
|
||
}
|
||
this.PageIndex2++;
|
||
this.getShoolList();
|
||
} else {
|
||
if (num >= this.total2) {
|
||
this.bottomState = true;
|
||
return
|
||
}
|
||
this.PageIndex++;
|
||
this.gethelpList();
|
||
}
|
||
},
|
||
onAuto() {
|
||
this.$u.route({
|
||
url: "/pages/my/ShoolList/ShoolList"
|
||
})
|
||
},
|
||
toAlumni(data) {
|
||
this.$u.route({
|
||
url: "/pages/AlumniCircle/Alumni/Alumni",
|
||
})
|
||
},
|
||
toDetil(id) {
|
||
this.$u.route({
|
||
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id
|
||
})
|
||
},
|
||
//收藏
|
||
async onStar(val) {
|
||
console.log('收藏--');
|
||
// 判断当前学校是否认证，未认证不可收藏
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
}
|
||
const res = await this.$u.apiList.MyPage(req)
|
||
console.log(JSON.parse(JSON.stringify(res)), 'res')
|
||
const edcationList = res.edcationList
|
||
if (!edcationList.length) {
|
||
return this.$refs.uToast.show({
|
||
title: '认证后可进行收藏操作',
|
||
type: 'none',
|
||
})
|
||
}
|
||
const findRow = edcationList.find(x => x.isSelected === true);
|
||
if ([0, 2].includes(findRow.certifyStatus)) {
|
||
return this.$refs.uToast.show({
|
||
title: '认证后可进行收藏操作',
|
||
type: 'none',
|
||
})
|
||
}
|
||
const data = {
|
||
id: val.id,
|
||
type: val.type
|
||
}
|
||
this.$u.apiList.LikeCollect(data)
|
||
.then((res) => {
|
||
if (val.isCllect) {
|
||
if (val.collectCount > 0) {
|
||
val.isCllect = false
|
||
val.collectCount--
|
||
this.$refs.uToast.show({
|
||
title: '取消收藏成功',
|
||
type: 'success',
|
||
})
|
||
}
|
||
} else {
|
||
val.isCllect = true
|
||
val.collectCount++
|
||
this.$refs.uToast.show({
|
||
title: '收藏成功',
|
||
type: 'success',
|
||
})
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$refs.uToast.show({
|
||
title: '收藏失败',
|
||
type: 'error',
|
||
})
|
||
})
|
||
},
|
||
//标签跳转
|
||
onSign(v) {
|
||
let i = this.sysList.indexOf(v)
|
||
this.oncurrent(i, v)
|
||
},
|
||
// 搜索校友圈
|
||
searchClick() {
|
||
this.$u.route({
|
||
url: "pages/AlumniCircle/searchAlumnus/searchAlumnus",
|
||
params: {
|
||
type: this.current, //0-学校咨询 1-校友帮帮
|
||
class: this.Keyword, //分类：全部 企业招聘 租房等
|
||
},
|
||
})
|
||
},
|
||
//发布资讯文章
|
||
async btnClick() {
|
||
// 判断当前学校是否认证，未认证不可发布
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
}
|
||
const res = await this.$u.apiList.MyPage(req)
|
||
console.log(JSON.parse(JSON.stringify(res)), 'res')
|
||
const edcationList = res.edcationList
|
||
if (!edcationList.length) {
|
||
return this.$refs.uToast.show({
|
||
title: '认证后可进行发布操作',
|
||
type: 'none',
|
||
})
|
||
}
|
||
const findRow = edcationList.find(x => x.isSelected === true);
|
||
if ([0, 2].includes(findRow.certifyStatus)) {
|
||
return this.$refs.uToast.show({
|
||
title: '认证后可进行发布操作',
|
||
type: 'none',
|
||
})
|
||
}
|
||
this.$u.route({
|
||
url: "pages/AlumniCircle/release/release",
|
||
params: {
|
||
Id: this.isShool,
|
||
type: this.current,
|
||
url: true
|
||
},
|
||
})
|
||
},
|
||
//预览图片
|
||
clickImg(item) {
|
||
this.isonShow = false
|
||
item = this.$u.http.config.imgUrl + item
|
||
var images = [];
|
||
images.push(item);
|
||
uni.previewImage({ // 图片路径必须是一个数组 => ['']
|
||
current: 0,
|
||
urls: images,
|
||
});
|
||
}
|
||
},
|
||
components: {
|
||
information: information,
|
||
dragButton: dragButton
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .u-tabs-scorll-flex {
|
||
width: 56%;
|
||
}
|
||
|
||
::v-deep .slot-wrap {
|
||
margin: 0 0.2rem;
|
||
}
|
||
|
||
::v-deep .u-slot-content {
|
||
display: block;
|
||
}
|
||
|
||
.group {
|
||
flex: 1 1 auto;
|
||
overflow-y: auto;
|
||
|
||
.group_1 {
|
||
padding-bottom: 0.015rem;
|
||
position: relative;
|
||
|
||
.section_1 {
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
.section_2 {
|
||
padding: 0.13rem 0.23rem 0.085rem;
|
||
background-color: rgb(255, 255, 255);
|
||
box-shadow: 0.0002rem 0.005rem rgba(0, 0, 0, 0.03);
|
||
|
||
.text_1 {
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.15rem;
|
||
line-height: 0.14rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.text_2 {
|
||
margin-left: 0.47rem;
|
||
color: rgb(160, 162, 172);
|
||
font-size: 0.15rem;
|
||
line-height: 0.14rem;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section_3 {
|
||
background-color: rgb(46, 155, 255);
|
||
border-radius: 0.015rem;
|
||
height: 0.035rem;
|
||
position: absolute;
|
||
left: 0.35rem;
|
||
right: 3.15rem;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
|
||
.group_2 {
|
||
padding-bottom: 1.03rem;
|
||
|
||
.section_4 {
|
||
padding: 0.33rem 0 0.34rem;
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
.section_5 {
|
||
margin-left: 0.18rem;
|
||
margin-right: 0.24rem;
|
||
padding: 0.2rem 0.18rem 0.18rem 0.24rem;
|
||
background-color: rgb(246, 247, 250);
|
||
|
||
.text_3 {
|
||
color: rgb(160, 162, 172);
|
||
font-size: 0.15rem;
|
||
line-height: 0.15rem;
|
||
letter-spacing: 0.015rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.text_4 {
|
||
margin-left: 0.05rem;
|
||
color: rgb(46, 155, 255);
|
||
font-size: 0.15rem;
|
||
line-height: 0.15rem;
|
||
white-space: nowrap;
|
||
text-transform: uppercase;
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_3 {
|
||
margin-top: 0.76rem;
|
||
padding-left: 0.8rem;
|
||
padding-right: 0.69rem;
|
||
color: rgb(163, 182, 202);
|
||
font-size: 0.15rem;
|
||
line-height: 0.15rem;
|
||
white-space: nowrap;
|
||
|
||
.text_5 {
|
||
margin-left: 0.02rem;
|
||
margin-top: 0.13rem;
|
||
}
|
||
|
||
.image_1 {
|
||
margin-right: 0.14rem;
|
||
width: 2.12rem;
|
||
height: 1.89rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.info-item {
|
||
padding: 24rpx;
|
||
}
|
||
}
|
||
|
||
.xyzz {
|
||
margin-bottom: 0.05rem;
|
||
|
||
.group_3 {
|
||
padding: 0.1rem 0 0.1rem;
|
||
overflow-x: hidden;
|
||
background: #fff;
|
||
// border-top: 1px solid #ccc;
|
||
|
||
.group_4 {
|
||
justify-content: space-between;
|
||
width: 85%;
|
||
margin: 0 auto;
|
||
|
||
>text {
|
||
color: #2e9bff;
|
||
font-size: 0.15rem;
|
||
line-height: 0.16rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.image_2 {
|
||
flex-shrink: 0;
|
||
width: 0.17rem;
|
||
height: 0.17rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.text_3 {
|
||
margin-left: 0.05rem;
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.15rem;
|
||
line-height: 0.15rem;
|
||
letter-spacing: 0.015rem;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
.group_23 {
|
||
width: 100vw;
|
||
overflow-x: scroll;
|
||
margin-top: 0.13rem;
|
||
|
||
.horiz-list {
|
||
overflow-x: auto;
|
||
padding: 0 0.15rem;
|
||
|
||
.list-item_2 {
|
||
padding: 0.05rem 0 0.065rem;
|
||
flex-shrink: 0;
|
||
width: 20%;
|
||
|
||
.image_3 {
|
||
border-radius: 50%;
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
box-shadow: 0 0 1px #6f6f6f;
|
||
}
|
||
|
||
.text_4 {
|
||
margin-top: 0.15rem;
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.12rem;
|
||
line-height: 0.12rem;
|
||
letter-spacing: 0.012rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.xyList {
|
||
.list {
|
||
margin-top: 0.055rem;
|
||
padding-bottom: 0.06rem;
|
||
|
||
.list-item_1 {
|
||
padding: 0.19rem 0 0.07rem;
|
||
background-color: rgb(255, 255, 255);
|
||
margin-bottom: 0.1rem;
|
||
|
||
.group_11 {
|
||
padding: 0 0.16rem;
|
||
|
||
.image_9 {
|
||
margin-bottom: 0.015rem;
|
||
width: 0.3rem;
|
||
height: 0.3rem;
|
||
}
|
||
|
||
.group_23 {
|
||
margin-left: 0.065rem;
|
||
margin-top: 0.02rem;
|
||
flex: 1 1 auto;
|
||
|
||
.text_10 {
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.14rem;
|
||
line-height: 0.13rem;
|
||
}
|
||
|
||
.text_11 {
|
||
margin-top: 0.055rem;
|
||
color: rgb(184, 184, 184);
|
||
font-size: 0.12rem;
|
||
line-height: 0.12rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text_12 {
|
||
margin-top: 0.17rem;
|
||
align-self: center;
|
||
color: rgb(55, 59, 72);
|
||
font-size: 0.18rem;
|
||
line-height: 0.17rem;
|
||
}
|
||
|
||
.text_13 {
|
||
margin: 0.12rem 0.15rem 0 0.17rem;
|
||
color: rgb(73, 76, 87);
|
||
font-size: 0.15rem;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
.equal-division {
|
||
margin-top: 0.035rem;
|
||
padding: 0.05rem 0.15rem;
|
||
|
||
.tool {
|
||
margin-top: 0.3rem;
|
||
|
||
.group_8 {
|
||
padding-left: 0.26rem;
|
||
padding-right: 0.24rem;
|
||
flex: 1 1 1.11rem;
|
||
|
||
.image_12 {
|
||
width: 0.22rem;
|
||
height: 0.21rem;
|
||
}
|
||
|
||
.text_17 {
|
||
margin-left: 0.08rem;
|
||
align-self: center;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
|
||
.group_9 {
|
||
margin-left: 0.055rem;
|
||
padding: 0 0.24rem;
|
||
flex: 1 1 1.11rem;
|
||
|
||
.image_14 {
|
||
width: 0.18rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
.text_18 {
|
||
margin-left: 0.08rem;
|
||
align-self: center;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
|
||
.group_10 {
|
||
margin-left: 0.05rem;
|
||
padding: 0 0.23rem;
|
||
flex: 1 1 1.11rem;
|
||
width: 1.12rem;
|
||
|
||
.image_16 {
|
||
margin-left: 0.07rem;
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
.text_19 {
|
||
align-self: center;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_10 {
|
||
flex: 1 1 1.11rem;
|
||
width: 1.11rem;
|
||
height: 1.11rem;
|
||
}
|
||
|
||
.image_13 {
|
||
margin-left: 0.055rem;
|
||
}
|
||
|
||
.image_15 {
|
||
margin-left: 0.05rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_18 {
|
||
.image_2 {
|
||
margin: 0 auto;
|
||
border-radius: 0.1rem;
|
||
width: 3.45rem;
|
||
height: 1.3rem;
|
||
}
|
||
|
||
.group_17 {
|
||
margin-top: 0rem;
|
||
|
||
|
||
|
||
.NavShow {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
background: #fff;
|
||
z-index: 999;
|
||
border-top: 0.01rem solid #eee;
|
||
}
|
||
|
||
.section_6 {
|
||
background-color: rgb(246, 247, 250);
|
||
|
||
.list-item {
|
||
padding: 0.18rem 0.1rem 0.21rem 0.16rem;
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
.view {
|
||
margin-right: 0.051rem;
|
||
}
|
||
|
||
.group_9 {
|
||
margin-right: 0.13rem;
|
||
margin-top: 0.17rem;
|
||
|
||
.text_14 {
|
||
align-self: flex-start;
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.18rem;
|
||
font-family: Adobe Heiti Std;
|
||
line-height: 0.17rem;
|
||
}
|
||
|
||
.text_15 {
|
||
margin-top: 0.11rem;
|
||
color: rgb(73, 76, 87);
|
||
font-size: 0.15rem;
|
||
font-family: Adobe Heiti Std;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
.text_16 {
|
||
margin-left: 0.04rem;
|
||
margin-top: 0.12rem;
|
||
align-self: flex-start;
|
||
color: rgb(44, 109, 255);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
}
|
||
|
||
.group_21 {
|
||
margin-left: 0.24rem;
|
||
margin-top: 0.1rem;
|
||
|
||
.group_20 {
|
||
margin: 0.025rem 0;
|
||
|
||
.image_6 {
|
||
flex-shrink: 0;
|
||
width: 0.22rem;
|
||
height: 0.21rem;
|
||
}
|
||
|
||
.text_17 {
|
||
margin-left: 0.08rem;
|
||
margin-top: 0.065rem;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
|
||
.group_10 {
|
||
margin-left: 0.63rem;
|
||
align-self: center;
|
||
|
||
.image_7 {
|
||
flex-shrink: 0;
|
||
width: 0.18rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
.text_18 {
|
||
margin-left: 0.08rem;
|
||
margin-top: 0.06rem;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
|
||
.equal-division-item_1 {
|
||
margin-left: 0.33rem;
|
||
padding: 0.03rem 0;
|
||
width: 1.18rem;
|
||
|
||
.image_8 {
|
||
margin-left: 0.3rem;
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
.text_19 {
|
||
margin-left: 0.095rem;
|
||
margin-top: 0.06rem;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-item_1 {
|
||
margin-top: 0.04rem;
|
||
padding: 0.18rem 0.099rem 0.17rem;
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
.group_13 {
|
||
margin-left: 0.061rem;
|
||
margin-right: 0.056rem;
|
||
}
|
||
|
||
.group_14 {
|
||
margin: 0.17rem 0.12rem 0 0.071rem;
|
||
|
||
.text_23 {
|
||
align-self: flex-start;
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.18rem;
|
||
font-family: Adobe Heiti Std;
|
||
line-height: 0.17rem;
|
||
}
|
||
|
||
.text_24 {
|
||
margin-top: 0.085rem;
|
||
color: rgb(73, 76, 87);
|
||
font-size: 0.15rem;
|
||
font-family: Adobe Heiti Std;
|
||
line-height: 0.24rem;
|
||
}
|
||
|
||
.text_25 {
|
||
margin-left: 0.04rem;
|
||
margin-top: 0.03rem;
|
||
align-self: flex-start;
|
||
color: rgb(44, 109, 255);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.16rem;
|
||
}
|
||
}
|
||
|
||
.equal-division {
|
||
margin-top: 0.04rem;
|
||
|
||
.equal-division-item_2 {
|
||
flex: 1 1 1.18rem;
|
||
padding: 0.029rem 0;
|
||
|
||
.image_10 {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
}
|
||
|
||
.text_26 {
|
||
margin: 0.062rem 0 0 0.085rem;
|
||
color: rgb(180, 182, 189);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.11rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_8 {
|
||
height: 0.32rem;
|
||
position: relative;
|
||
|
||
.image_3 {
|
||
width: 0.3rem;
|
||
height: 0.3rem;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.text_8 {
|
||
color: rgb(2, 2, 2);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
|
||
.text_43 {
|
||
position: absolute;
|
||
left: 0.37rem;
|
||
top: 0.02rem;
|
||
}
|
||
|
||
.text_9 {
|
||
color: rgb(184, 184, 184);
|
||
font-size: 0.12rem;
|
||
font-family: PingFang;
|
||
line-height: 0.12rem;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0.035rem;
|
||
}
|
||
|
||
.text_11 {
|
||
color: rgb(184, 184, 184);
|
||
font-size: 0.12rem;
|
||
font-family: PingFang;
|
||
line-height: 0.12rem;
|
||
position: absolute;
|
||
left: 0.37rem;
|
||
bottom: 0;
|
||
}
|
||
|
||
.text_20 {
|
||
position: absolute;
|
||
left: 0.36rem;
|
||
top: 0.02rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-top {
|
||
background: #fff;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.tabs-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.search-box {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F6F8F9;
|
||
border-radius: 50%;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.tabs-box {
|
||
display: flex;
|
||
width: 482rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
background: #F6F8F9;
|
||
border-radius: 200rpx;
|
||
margin-left: 40rpx;
|
||
|
||
.tabs-item {
|
||
width: 218rpx;
|
||
height: 72rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
.tabs-item-active {
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 8rpx -8rpx rgba(18, 18, 18, 0.08), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.05);
|
||
border-radius: 200rpx;
|
||
border: 3rpx solid;
|
||
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)) 3 3;
|
||
}
|
||
}
|
||
|
||
.page-title {
|
||
padding: 40rpx 40rpx 40rpx;
|
||
color: #000;
|
||
font-size: 36rpx;
|
||
font-weight: 800;
|
||
background: #fff;
|
||
|
||
}
|
||
.section_5 {
|
||
justify-content: space-between;
|
||
padding: 0.11rem 0.17rem 0rem;
|
||
background-color: rgb(255, 255, 255);
|
||
box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);
|
||
position: relative;
|
||
font-size: 32rpx;
|
||
|
||
.tab-text {
|
||
// margin: 0 0.1rem;
|
||
}
|
||
|
||
.text_3 {
|
||
margin-bottom: 0.02rem;
|
||
// color: rgb(46, 155, 255);
|
||
// font-size: 0.18rem;
|
||
font-weight: 800;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
font-family: PingFang;
|
||
line-height: 0.21rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
bottom: 2rpx;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 12rpx;
|
||
background: linear-gradient(116deg, rgba(60, 181, 251, 0) 0%, #28C6FB 45%, #06E1FA 100%);
|
||
border-radius: 2rpx;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
|
||
.text_4 {
|
||
margin: 0.025rem 0 0.015rem 0.34rem;
|
||
color: rgb(160, 162, 172);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.14rem;
|
||
}
|
||
|
||
.text_5 {
|
||
margin-left: 0.26rem;
|
||
margin-top: 0.015rem;
|
||
color: rgb(160, 162, 172);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.16rem;
|
||
}
|
||
|
||
.text_6 {
|
||
margin-left: 0.29rem;
|
||
margin-top: 0.02rem;
|
||
color: rgb(160, 162, 172);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.16rem;
|
||
}
|
||
|
||
.text_7 {
|
||
margin-left: 0.35rem;
|
||
margin-top: 0.015rem;
|
||
color: rgb(160, 162, 172);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.16rem;
|
||
}
|
||
}
|
||
</style>
|