root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-04-07 18:04:39 +08:00
parent 0b9f4dc555
commit e3debde7e2
21 changed files with 818 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/XButton.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup>
</script>
<template>
<view class="x-button">
<slot></slot>
</view>
</template>
<style scoped lang="scss">
.x-button {
color: #fff;
background-color: var(--primary-color);
padding: 22rpx 0;
display: flex;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0;
text-align: left;
border-radius: 8rpx;
}
</style>

75
src/components/XImage.vue
View File

@@ -1,24 +1,85 @@
<script setup>
const {src} = defineProps({
import {ref} from 'vue';
const {src, list} = defineProps({
src: {
type: String,
default: "",
},
list: {
type: Array,
default: () => [],
},
cur: {
type: Number,
default: 0,
}
});
const show = ref(false);
const preview = () => {
uni.previewImage({
current: 0,
urls: [src],
indicator: true,
}).then();
show.value = true;
}
</script>
<template>
<image @click="preview" v-bind="$attrs" :src="src"></image>
<image @click="preview" v-bind="$attrs" :src="src" mode="aspectFill"></image>
<view
v-if="show"
@click="show=false"
class="x-image-preview">
<view class="x-image-docker">
<template v-if="list.length>1">
<swiper class="!size-full" :current="cur" @change="({detail:{current}})=>cur=current">
<swiper-item v-for="src in list">
<image class="!size-full" :src="src" mode="aspectFit"></image>
</swiper-item>
</swiper>
<view class="bg-[rgba(255,255,255,.3)] text-[#fff] test-28r rounded-full px-[20rpx] py-[6rpx] fixed left-1/2 -translate-x-1/2">
{{cur+1}} / {{list.length}}
</view>
</template>
<template v-else>
<image class="!size-full" :src="src" mode="aspectFit"></image>
</template>
<image
v-if="list.length>1"
@click="show=false"
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-130rpx]"
src="/static/icons/close.png">
</image>
<image
v-else
@click="show=false"
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-60rpx]"
src="/static/icons/close.png">
</image>
</view>
</view>
</template>
<style scoped lang="scss">
.x-image-preview {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
.x-image-docker {
width: 620rpx;
height: 1060rpx;
position: relative;
}
}
</style>

17
src/components/XLink.vue
View File

@@ -1,13 +1,24 @@
<script setup>
const {showDescription} = defineProps({
showDescription: {
type: Boolean,
default: false,
}
});
</script>
<template>
<view class="text-[var(--primary-color)]">
<view :class="['x-link', showDescription?'x-description':'']">
<slot></slot>
</view>
</template>
<style scoped>
<style lang="scss" scoped>
.x-link {
color: var(--primary-color);
}
.x-description {
text-decoration: underline;
}
</style>

54
src/components/XNoticeBar.vue
View File

@@ -1,6 +1,29 @@
<script setup>
import {ref, onMounted} from "vue";
import warn from '../static/icons/warn.png';
import success from '../static/icons/info.png';
const STATUS = {
error: {
bg: 'x-notice-box-error',
context: 'context-error'
},
success: {
bg: 'x-notice-box-success',
context: 'context-success'
},
};
const {text, status} = defineProps({
text: {
type: String,
default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
},
status: {
type: String,
default: 'error'
}
});
const XNoticeBox = ref();
const Context = ref();
@@ -18,22 +41,39 @@ onMounted(() => {
</script>
<template>
<view ref="XNoticeBox" class="x-notice-box">
<view ref="Context" :class="['context', roll ? 'roll' : '']">
<image class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
<text class="!whitespace-nowrap flex-shrink-0">提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈</text>
<view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
<view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]">
<image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
<image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
<text class="!whitespace-nowrap flex-shrink-0">{{ text }}</text>
</view>
</view>
</template>
<style scoped lang="scss">
.x-notice-box {
padding: 18rpx 24rpx;
.x-notice-box-error {
background-color: #FFF7E8;
}
.context {
.x-notice-box-success {
background-color: #E8F3FF;
}
.context-error {
color: rgb(255, 87, 34);
}
.context-success {
color: rgb(29, 33, 41);
}
.x-notice-box {
padding: 18rpx 24rpx;
width: 100%;
overflow: hidden;
}
.context {
font-size: 24rpx;
font-weight: 400;
line-height: 22px;

24
src/components/XSquareCarouselImage.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup>
import testIcon from '../static/images/test.png';
const {list} = defineProps({
list: {
type: Array,
default: [
testIcon, testIcon, testIcon, testIcon
],
},
});
</script>
<template>
<swiper class="!w-[160rpx] !h-[160rpx] !aspect-square" indicator-dots>
<swiper-item v-for="v in list">
<image class="!w-full !h-full" mode="aspectFill" :src="v"></image>
</swiper-item>
</swiper>
</template>
<style scoped lang="scss">
</style>