2025.2.20 第二版
This commit is contained in:
parent
b081e437b5
commit
b3ff6f95a1
21
pages.json
21
pages.json
|
|
@ -8,21 +8,16 @@
|
|||
"orientation": "landscape" // 设置为横屏
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"orientation": "landscape" // 设置为横屏
|
||||
}
|
||||
|
||||
}
|
||||
// {
|
||||
// "path": "pages/index/indexDark",
|
||||
// "style": {
|
||||
// "navigationStyle": "custom",
|
||||
// "orientation": "landscape" // 设置为横屏
|
||||
// }
|
||||
|
||||
// }
|
||||
// {
|
||||
// "path": "pages/login/login",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "注册页"
|
||||
// }
|
||||
// }
|
||||
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`">
|
||||
<view class="left-container">
|
||||
<view class="left-head">
|
||||
<view class="left-head" @click="gotoLogin">
|
||||
<image class="left-head-img" src="/static/index/oldman.png" />
|
||||
<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
|
||||
王金凤
|
||||
|
|
@ -42,21 +42,40 @@
|
|||
<view class="right-container-fir-left">
|
||||
<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
|
||||
<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
|
||||
<font class="right-container-fir-left-card-hulilei-font">护理类</font>
|
||||
<div class="right-container-fir-left-card-hulilei-font">护理类</div>
|
||||
<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
|
||||
<view class="right-container-fir-left-carousel">
|
||||
<view class="carousel">
|
||||
<view class="dots">
|
||||
<span v-for="(item, index) in [1, 2, 3]" :key="index"
|
||||
:class="darkFans?`dot-dark`:`dot`"
|
||||
:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-container-fir-left-card-main">
|
||||
<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`"
|
||||
<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular
|
||||
:indicator-dots="false" :vertical="true" :interval="4000" :duration="500"
|
||||
@change="onSwiperChange">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
|
||||
<view class="right-container-fir-left-card-flex">
|
||||
<image class="right-container-fir-left-card-main-left"
|
||||
:src="`/static/index/arrow2.png`"
|
||||
@click="firstcurrentIndex===0?firstcurrentIndex=2:firstcurrentIndex=firstcurrentIndex-1" />
|
||||
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper :current="firstcurrentIndex" class="swiper" circular :indicator-dots="false"
|
||||
:autoplay="true" :interval="4000" :duration="500">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
|
||||
|
||||
<swiper :current="firstcurrentIndex" class="swiper" circular
|
||||
:indicator-dots="false" :interval="4000" :duration="500">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
|
||||
:key="index">
|
||||
<view class="right-container-fir-left-card-card">
|
||||
<view class="right-container-fir-left-card-zhixing">
|
||||
<image class="right-container-fir-left-card-zhixing-img"
|
||||
:src="`/static/index/daizhixing.png`" />
|
||||
<font class="right-container-fir-left-card-zhixing-font">待执行</font>
|
||||
<div class="right-container-fir-left-card-zhixing-font">待执行
|
||||
</div>
|
||||
</view>
|
||||
<image class="right-container-fir-left-card-img"
|
||||
:src="`/static/index/teeth.png`" />
|
||||
|
|
@ -96,36 +115,61 @@
|
|||
<view class="time-button-start">
|
||||
开始服务
|
||||
</view>
|
||||
<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
|
||||
<view
|
||||
:class="darkFans?`time-button-end-dark`:`time-button-end`">
|
||||
服务结束
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`"
|
||||
<image class="right-container-fir-left-card-main-right"
|
||||
:src="`/static/index/arrow.png`"
|
||||
@click="firstcurrentIndex===2?firstcurrentIndex=0:firstcurrentIndex=firstcurrentIndex+1" />
|
||||
<view class="split-line-white"></view>
|
||||
<view class="split-line-white">
|
||||
<image v-if="darkFans" class="split-line-white-img"
|
||||
:src="`/static/index/cardbgc/leftlight.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="right-huli">
|
||||
<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
|
||||
<view class="right-huli-view" v-if="!darkFans">
|
||||
<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true"
|
||||
class="right-huli-view">
|
||||
<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis">
|
||||
<image class="right-huli-img" :src="item.url" />
|
||||
<text class="right-huli-text">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 暗黑模式 -->
|
||||
<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true"
|
||||
class="right-huli-view">
|
||||
<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
|
||||
<image class="right-huli-img" :src="item.url" />
|
||||
<text class="right-huli-text-dark">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- <view class="right-huli-view" v-if="!darkFans">
|
||||
<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis">
|
||||
<image class="right-huli-img" :src="item.url" />
|
||||
<text class="right-huli-text">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暗黑模式 -->
|
||||
|
||||
<view class="right-huli-view" v-if="darkFans">
|
||||
<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
|
||||
<image class="right-huli-img" :src="item.url" />
|
||||
<text class="right-huli-text-dark">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
|
@ -186,13 +230,28 @@
|
|||
|
||||
<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
|
||||
<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
|
||||
<font class="right-container-left-font">医疗类</font>
|
||||
<div class="right-container-left-font">医疗类</div>
|
||||
<view class="right-container-fir-left-carousel">
|
||||
<view class="carousel">
|
||||
<view class="dots">
|
||||
<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
|
||||
:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
|
||||
<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular :indicator-dots="false"
|
||||
:vertical="true" :interval="4000" :duration="500" @change="onSwiperChange">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
|
||||
<div class="right-container-fir-left-card-flex">
|
||||
<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`"
|
||||
@click="secondcurrentIndex===0?secondcurrentIndex=2:secondcurrentIndex=secondcurrentIndex-1" />
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper :current="secondcurrentIndex" class="swiper" circular :indicator-dots="false"
|
||||
:autoplay="true" :interval="4000" :duration="500">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
|
||||
<swiper :current="secondcurrentIndex" class="swiper" circular
|
||||
:indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
|
||||
:key="index">
|
||||
<view class="time-tra">
|
||||
|
||||
<view :class="darkFans?`time-font-dark`:`time-font`">
|
||||
|
|
@ -200,7 +259,8 @@
|
|||
</view>
|
||||
<view :class="darkFans?`time-text-dark`:`time-text`">
|
||||
<text>静脉注射</text>
|
||||
<image class="time-text-img" :src="`/static/index/yiliao/project4.png`" />
|
||||
<image class="time-text-img"
|
||||
:src="`/static/index/yiliao/project4.png`" />
|
||||
</view>
|
||||
<view class="time-people">
|
||||
<image class="time-people-img"
|
||||
|
|
@ -249,21 +309,33 @@
|
|||
|
||||
<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`"
|
||||
@click="secondcurrentIndex===2?secondcurrentIndex=0:secondcurrentIndex=secondcurrentIndex+1" />
|
||||
<view class="split-line-white"></view>
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="split-line-white">
|
||||
<image v-if="darkFans" class="split-line-white-img"
|
||||
:src="`/static/index/cardbgc/leftlight.png`" />
|
||||
</view>
|
||||
<view class="right-huli">
|
||||
<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
|
||||
<view class="right-huli-view" v-if="!darkFans">
|
||||
<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
|
||||
<view v-for="(item,index) in mediumList" :key="index" class="right-huli-view-dis">
|
||||
<image class="right-huli-img" :src="item.url" />
|
||||
<text class="right-huli-text">{{item.name}}</text>
|
||||
<div class="progress-bar-container" v-show="item.number !== 0">
|
||||
<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-huli-view" v-if="darkFans">
|
||||
</scroll-view>
|
||||
<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
|
||||
<view v-for="(item,index) in mediumListdark" :key="index" class="right-huli-view-dis">
|
||||
<image class="right-huli-img" :src="item.url" />
|
||||
<text class="right-huli-text-dark">{{item.name}}</text>
|
||||
<div class="progress-bar-container" v-show="item.number !== 0">
|
||||
<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
|
||||
</view>
|
||||
|
||||
|
|
@ -284,12 +356,14 @@
|
|||
<swiper :current="thirdcurrentIndex" class="swiper" circular :indicator-dots="false"
|
||||
:autoplay="true" :interval="4000" :duration="500">
|
||||
<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
|
||||
<view class="right-container-right-down-card"
|
||||
:style="darkFans ? { backgroundColor: 'rgb(22, 48, 76)',border:`3rpx solid #fff`,boxShadow:'' } : ''">
|
||||
<view
|
||||
:class="darkFans?`right-container-right-down-card-dark`:`right-container-right-down-card`">
|
||||
<view class="right-container-right-down-card-card">
|
||||
<image class="right-container-right-down-card-card-type"
|
||||
:src="`/static/index/label.png`" />
|
||||
<font class="right-container-right-down-card-card-font">保洁类</font>
|
||||
:src="darkFans?`/static/index/darkicon/baojieleidark.png`:`/static/index/label.png`" />
|
||||
<div
|
||||
:class="darkFans? `right-container-right-down-card-card-font-dark`: `right-container-right-down-card-card-font`">
|
||||
保洁类</div>
|
||||
<image class="right-container-right-down-card-img"
|
||||
:src="`/static/index/project3.png`" />
|
||||
<view class="">
|
||||
|
|
@ -370,7 +444,12 @@
|
|||
url : string;
|
||||
name : string
|
||||
}
|
||||
|
||||
// 定义 药品类型
|
||||
type medType = {
|
||||
url : string;
|
||||
name : string,
|
||||
number : number
|
||||
}
|
||||
// 初始化第一个卡片列表
|
||||
const huliList = ref<huliListType[]>([
|
||||
{ url: '/static/index/hulilist/zhuandan.png', name: "转单执行" },
|
||||
|
|
@ -384,18 +463,20 @@
|
|||
{ url: '/static/index/darkicon/zhongdiandark.png', name: "重点" },
|
||||
]);
|
||||
// 初始化第二排第一个卡片列表
|
||||
const mediumList = ref<huliListType[]>([
|
||||
{ url: '/static/index/medium/yaopin.png', name: "药品信息" },
|
||||
{ url: '/static/index/medium/qingling.png', name: "请领指令" },
|
||||
{ url: '/static/index/medium/peiyao.png', name: "配药指令" },
|
||||
{ url: '/static/index/medium/xinxi.png', name: "信息反馈" },
|
||||
const mediumList = ref<medType[]>([
|
||||
{ url: '/static/index/medium/yaopin.png', name: "药品信息", number: 0 },
|
||||
{ url: '/static/index/medium/qingling.png', name: "请领指令", number: 60 },
|
||||
{ url: '/static/index/medium/peiyao.png', name: "配药指令", number: 100 },
|
||||
{ url: '/static/index/medium/xinxi.png', name: "信息反馈", number: 0 },
|
||||
{ url: '/static/index/medium/xinxi.png', name: "信息反馈2", number: 0 },
|
||||
]);
|
||||
// 初始化第二排第一个卡片列表 暗黑模式
|
||||
const mediumListdark = ref<huliListType[]>([
|
||||
{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息" },
|
||||
{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令" },
|
||||
{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令" },
|
||||
{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈" },
|
||||
const mediumListdark = ref<medType[]>([
|
||||
{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息", number: 55 },
|
||||
{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令", number: 10 },
|
||||
{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令", number: 100 },
|
||||
{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈", number: 15 },
|
||||
{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈2", number: 20 },
|
||||
]);
|
||||
// 定义 Link 类型
|
||||
type roomBtttonType = {
|
||||
|
|
@ -426,6 +507,7 @@
|
|||
const roomTar = ref<number[]>([]);
|
||||
//滑块按钮
|
||||
const firstcurrentIndex = ref<number>(0);
|
||||
const firstcurrentIndexup = ref<number>(0);
|
||||
const secondcurrentIndex = ref<number>(0);
|
||||
const thirdcurrentIndex = ref<number>(0);
|
||||
// 变更菜单
|
||||
|
|
@ -465,6 +547,16 @@
|
|||
const week = weekDays[now.getDay()];
|
||||
weekDay.value = week;
|
||||
};
|
||||
//给轮播图用的
|
||||
const onSwiperChange = (event : any) => {
|
||||
firstcurrentIndexup.value = event.detail.current;
|
||||
};
|
||||
const gotoLogin = () => {
|
||||
// 跳转到目标页面
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/login/login' // 路径要以 / 开头，表示从根目录开始
|
||||
// });
|
||||
}
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
updateTime();
|
||||
|
|
@ -511,6 +603,58 @@
|
|||
height: 900rpx;
|
||||
margin-top: 50rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.right-container-fir-left-carousel {
|
||||
position: absolute;
|
||||
right: 280rpx;
|
||||
top: 0rpx;
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
width: 300rpx;
|
||||
/* 轮播图的宽度 */
|
||||
height: 200rpx;
|
||||
/* 轮播图的高度 */
|
||||
// background-color: #f0f0f0;
|
||||
|
||||
/* 背景色（示例） */
|
||||
.dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10rpx;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #657494;
|
||||
/* 默认未激活的颜色 */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dot-dark {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
/* 默认未激活的颜色 */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #01A0FE;
|
||||
/* 激活的颜色 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-container-right {
|
||||
margin-left: 2%;
|
||||
|
|
@ -666,6 +810,84 @@
|
|||
width: 100rpx;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-dark {
|
||||
margin-left: 5rpx;
|
||||
margin-right: 5rpx;
|
||||
margin-top: 80rpx;
|
||||
width: 99%;
|
||||
height: 650rpx;
|
||||
border-radius: 80rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-shadow: 2rpx 0 0 2rpx;
|
||||
background-color: rgb(22, 48, 76);
|
||||
|
||||
// background-image: url('/static/index/cardbgc/newbgc.png');
|
||||
// background-position: 50% 60%;
|
||||
border: 3rpx solid #fff;
|
||||
|
||||
|
||||
.right-container-right-down-card-line {
|
||||
width: 1px;
|
||||
/* 线条的宽度 */
|
||||
height: 300rpx;
|
||||
/* 高度占满父容器 */
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||||
margin-left: -20rpx;
|
||||
margin-right: 30rpx;
|
||||
margin-top: 150rpx;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 450rpx;
|
||||
position: relative;
|
||||
|
||||
.right-container-right-down-card-card-type {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: -25rpx;
|
||||
width: 315rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-card-font {
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
left: 95rpx;
|
||||
font-size: 40rpx;
|
||||
color: #414F6E;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-card-font-dark {
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
left: 95rpx;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-img {
|
||||
width: 400rpx;
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-font {
|
||||
font-size: 50rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-font-dark {
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-container-right-down-card {
|
||||
margin-left: 5rpx;
|
||||
margin-right: 5rpx;
|
||||
|
|
@ -673,14 +895,12 @@
|
|||
width: 99%;
|
||||
height: 650rpx;
|
||||
border-radius: 80rpx;
|
||||
// border: 1rpx solid ;
|
||||
background-color: rgba(200, 216, 238, 0.8);
|
||||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||||
position: relative;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
// flex-direction: column;
|
||||
box-shadow: 2rpx 0 0 2rpx;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
background-image: url('/static/index/cardbgc/newbgc.png');
|
||||
background-position: 50% 60%;
|
||||
|
||||
.right-container-right-down-card-line {
|
||||
width: 1px;
|
||||
|
|
@ -724,11 +944,13 @@
|
|||
|
||||
.right-container-right-down-card-font {
|
||||
font-size: 50rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.right-container-right-down-card-font-dark {
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -775,12 +997,17 @@
|
|||
height: 900rpx;
|
||||
border-radius: 80rpx;
|
||||
border: 1rpx solid #fff;
|
||||
background-color: rgba(203, 219, 238, 0.8);
|
||||
// background-color: rgba(203, 219, 238, 0.8);
|
||||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
/* 白色背景透明度为 10% */
|
||||
background-image: url('/static/index/cardbgc/newbgc.png');
|
||||
background-position: 10% 60%;
|
||||
/* 背景图片从左上角25%和30%的位置开始 */
|
||||
}
|
||||
|
||||
.right-container-left-dark {
|
||||
|
|
@ -821,6 +1048,7 @@
|
|||
margin-right: 5rpx;
|
||||
width: 70rpx;
|
||||
height: 90rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.right-huli {
|
||||
|
|
@ -833,42 +1061,41 @@
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.right-huli-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.right-huli-view {
|
||||
height: 700rpx;
|
||||
height: 750rpx;
|
||||
// background-color: #047ADB;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.right-huli-view-dis {
|
||||
// flex-direction: column;
|
||||
margin-top: 30rpx;
|
||||
// margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
|
||||
.right-huli-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.right-huli-text {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
height: 25rpx;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.right-huli-text-dark {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
height: 25rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -924,16 +1151,18 @@
|
|||
position: absolute;
|
||||
top: 70rpx;
|
||||
left: -15rpx;
|
||||
width: 315rpx;
|
||||
width: 320rpx;
|
||||
height: 104rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.right-container-left-font {
|
||||
position: absolute;
|
||||
top: 80rpx;
|
||||
left: 55rpx;
|
||||
left: 63rpx;
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.time-tra {
|
||||
|
|
@ -1064,6 +1293,7 @@
|
|||
width: 100%;
|
||||
height: 900rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
// background-color: red;
|
||||
.right-container-fir-left {
|
||||
|
|
@ -1074,7 +1304,7 @@
|
|||
position: relative;
|
||||
|
||||
/* 使用背景来模拟边框 */
|
||||
background-image: linear-gradient(45deg, #A496E8, #777CCC, #FAFDFF, #8BC5ED, #B8C5DD, #BBC8DD);
|
||||
// background-image: linear-gradient(45deg, #A496E8, #777CCC, #FAFDFF, #8BC5ED, #B8C5DD, #BBC8DD);
|
||||
background-origin: border-box;
|
||||
/* 背景从边框开始 */
|
||||
background-clip: content-box;
|
||||
|
|
@ -1087,6 +1317,56 @@
|
|||
/* 内部背景色 */
|
||||
box-sizing: border-box;
|
||||
|
||||
.right-container-fir-left-carousel {
|
||||
position: absolute;
|
||||
right: 380rpx;
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
width: 300rpx;
|
||||
/* 轮播图的宽度 */
|
||||
height: 200rpx;
|
||||
/* 轮播图的高度 */
|
||||
// background-color: #f0f0f0;
|
||||
|
||||
/* 背景色（示例） */
|
||||
.dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10rpx;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #657494;
|
||||
/* 默认未激活的颜色 */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dot-dark {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
/* 默认未激活的颜色 */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #01A0FE;
|
||||
/* 激活的颜色 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 包括边框在内计算宽高 */
|
||||
.right-container-fir-left-card {
|
||||
position: absolute;
|
||||
|
|
@ -1095,7 +1375,12 @@
|
|||
width: 99%;
|
||||
height: 98%;
|
||||
border-radius: 80rpx;
|
||||
background-color: rgb(195, 211, 233);
|
||||
border: 2rpx solid #fff;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
/* 白色背景透明度为 10% */
|
||||
background-image: url('/static/index/cardbgc/newbgc.png');
|
||||
background-position: 10% 60%;
|
||||
/* 背景图片从左上角25%和30%的位置开始 */
|
||||
}
|
||||
|
||||
.right-container-fir-left-card-dark {
|
||||
|
|
@ -1105,7 +1390,10 @@
|
|||
width: 99%;
|
||||
height: 98%;
|
||||
border-radius: 80rpx;
|
||||
background-color: rgb(22, 48, 76);
|
||||
background-image: url('/static/index/cardbgc/bgcdark.png');
|
||||
background-color: rgba(12, 25, 47, 0.1);
|
||||
// background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/static/index/cardbgc/fircardbgc.png');
|
||||
border: 2rpx solid #fff;
|
||||
/* 底色 */
|
||||
// background: linear-gradient(135deg, rgba(14, 27, 53, 0.45), rgba(52, 78, 119, 0.45), rgba(28, 74, 112, 0.45));
|
||||
}
|
||||
|
|
@ -1125,6 +1413,15 @@
|
|||
/* 高度占满父容器 */
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
|
||||
margin-right: 50rpx;
|
||||
position: relative;
|
||||
|
||||
.split-line-white-img {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: -300rpx;
|
||||
height: 800rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
|
|
@ -1152,72 +1449,10 @@
|
|||
margin-right: 30rpx;
|
||||
width: 70rpx;
|
||||
height: 90rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.right-huli {
|
||||
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
// background-color: #047ADB;
|
||||
margin-top: -100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.right-huli-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-huli-view {
|
||||
height: 700rpx;
|
||||
// background-color: #047ADB;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.right-huli-view-dis {
|
||||
// flex-direction: column;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.right-huli-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.right-huli-text {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right-huli-text-dark {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-huli-shang {
|
||||
width: 50rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.right-huli-xia {
|
||||
margin-top: 10rpx;
|
||||
width: 50rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-tra {
|
||||
margin-left: 30rpx;
|
||||
|
|
@ -1394,7 +1629,7 @@
|
|||
left: -15rpx;
|
||||
width: 315rpx;
|
||||
height: 104rpx;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.right-container-fir-left-card-hulilei-font {
|
||||
|
|
@ -1403,6 +1638,7 @@
|
|||
left: 55rpx;
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1694,8 +1930,132 @@
|
|||
/* 高度占满父容器 */
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
|
||||
margin-left: 20rpx;
|
||||
/* 上面到下面的渐变效果：
|
||||
- 从透明到黑色，再从黑色到透明
|
||||
- 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
|
||||
position: relative;
|
||||
|
||||
.split-line-white-img {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: -300rpx;
|
||||
height: 800rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-upfaguang {
|
||||
position: absolute;
|
||||
top: 600rpx;
|
||||
left: 150rpx;
|
||||
height: 600rpx;
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
.card-upfaguang-down {
|
||||
position: absolute;
|
||||
top: 620rpx;
|
||||
left: 860rpx;
|
||||
height: 600rpx;
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
.right-container-fir {}
|
||||
|
||||
.right-huli {
|
||||
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
// background-color: #047ADB;
|
||||
margin-top: -100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
|
||||
.right-huli-view {
|
||||
// margin-top: 50rpx;
|
||||
min-height: 650rpx;
|
||||
// background-color: #047ADB;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
/* 垂直方向对齐方式可以调整 */
|
||||
flex-direction: column;
|
||||
|
||||
.right-huli-view-dis {
|
||||
height: 250rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.right-huli-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.right-huli-text {
|
||||
width: 100%;
|
||||
height: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right-huli-text-dark {
|
||||
width: 100%;
|
||||
height: 25rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-huli-shang {
|
||||
width: 50rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.right-huli-xia {
|
||||
// margin-top: 10rpx;
|
||||
width: 50rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right-container-fir-left-card-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.savehundred {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mt {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
margin-top: 30rpx;
|
||||
width: 60%;
|
||||
height: 20rpx;
|
||||
background-color: #AAB9D6;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
|
||||
/* 这里可以更改进度百分比 */
|
||||
background: linear-gradient(to top, #047ADB, #0EA7DD);
|
||||
border-radius: 15px 0 0 15px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
|
||||
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
|
||||
<swiper-item>
|
||||
1
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
2
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
3
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
isDragging: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 手指触摸开始
|
||||
onTouchStart(e) {
|
||||
this.startX = e.touches[0].clientX;
|
||||
this.startY = e.touches[0].clientY;
|
||||
this.isDragging = false;
|
||||
},
|
||||
// 手指滑动
|
||||
onTouchMove(e) {
|
||||
const moveX = e.touches[0].clientX - this.startX;
|
||||
const moveY = e.touches[0].clientY - this.startY;
|
||||
|
||||
if (Math.abs(moveX) > Math.abs(moveY)) {
|
||||
// 横向滑动
|
||||
this.isDragging = true;
|
||||
} else {
|
||||
// 纵向滑动
|
||||
this.isDragging = true;
|
||||
}
|
||||
|
||||
if (this.isDragging) {
|
||||
e.preventDefault(); // 防止页面默认滑动
|
||||
}
|
||||
},
|
||||
// 手指抬起
|
||||
onTouchEnd() {
|
||||
this.isDragging = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 876 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 351 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Loading…
Reference in New Issue