feat: 1,星勤:信息发布模块—新增编辑图片/视频轮播页面UI布局2,星勤:信息发布模块—新增素材库UI布局3,星勤:信息发布模块—新增发布计划页面UI布局
This commit is contained in:
“DaisyWu”
parent
46bb7cebed
commit
e58a2a1b21
161
src/pages/info-publish/edit-pic-video.vue
Normal file
161
src/pages/info-publish/edit-pic-video.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="h-[calc(100vh-0px)] flex flex-col">
|
||||
<TopNavigation title="编辑图片/视频轮播"></TopNavigation>
|
||||
<scroll-view class="flex-1 box-border" scroll-y>
|
||||
<view class="content-form">
|
||||
<!-- 名称 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">名称</view>
|
||||
<view class="form-value">
|
||||
<input
|
||||
type="text"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入名称"
|
||||
class="form-input"
|
||||
/>
|
||||
<text v-if="formData.name" class="clear-icon" @click="clearName">×</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 屏幕方向 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">屏幕方向</view>
|
||||
<view class="form-value">
|
||||
<text>横屏</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 屏幕分辨率 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">屏幕分辨率</view>
|
||||
<view class="form-value">
|
||||
<text>1920*1080</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容类型 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">内容类型</view>
|
||||
<view class="form-value">
|
||||
<text>图片/视频轮播</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="footer">
|
||||
<button class="next-btn" @click="handleNext">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
name: '智慧屏节目202412260150523'
|
||||
})
|
||||
|
||||
// 清除名称
|
||||
const clearName = () => {
|
||||
formData.value.name = ''
|
||||
}
|
||||
|
||||
// 下一步按钮点击事件
|
||||
const handleNext = () => {
|
||||
// 实现下一步逻辑
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.content-form {
|
||||
margin: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
display: flex;
|
||||
flex: 1; // 添加这行，让表单值区域占据剩余空间
|
||||
align-items: center;
|
||||
justify-content: flex-end; // 添加这行，让内容靠右对齐
|
||||
|
||||
.form-input {
|
||||
flex: 1; // 让输入框占据剩余空间
|
||||
height: 20px; // 设置合适的高度
|
||||
padding: 0; // 移除默认内边距
|
||||
margin-left: 16px; // 与左侧标签保持间距
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
text-align: right; // 文本右对齐
|
||||
background: transparent; // 透明背景
|
||||
border: none; // 移除边框
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
flex-shrink: 0; // 防止图标被压缩
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
line-height: 16px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.next-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
background: #4080ff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -69,7 +69,7 @@
|
||||
title: '发布计划',
|
||||
description: '设置播放内容与时间规则同步到设备',
|
||||
icon: '/static/images/plan_icon.png',
|
||||
path: '/pages/info-publish/plan'
|
||||
path: '/pages/info-publish/release-plan'
|
||||
},
|
||||
{
|
||||
title: '公告管理',
|
||||
@ -87,7 +87,7 @@
|
||||
},
|
||||
{
|
||||
title: '屏幕控制',
|
||||
icon: 'screen'
|
||||
icon: 'home'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
@ -94,25 +94,25 @@
|
||||
// 素材列表数据
|
||||
const materialList = ref([
|
||||
{
|
||||
icon: '/static/images/house_resource.png',
|
||||
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||
name: 'house_resource.png',
|
||||
id: 'HikMall_30013234',
|
||||
time: '2024-12-26 15:11:18'
|
||||
},
|
||||
{
|
||||
icon: '/static/images/app_icon.png',
|
||||
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||
name: 'app_icon.png',
|
||||
id: 'HikMall_30013234',
|
||||
time: '2024-12-26 15:10:37'
|
||||
},
|
||||
{
|
||||
icon: '/static/images/home.png',
|
||||
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||
name: 'home.png',
|
||||
id: 'HikMall_30013234',
|
||||
time: '2024-12-26 15:05:10'
|
||||
},
|
||||
{
|
||||
icon: '/static/images/lock.jpg',
|
||||
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||
name: '锁通通 2.jpg',
|
||||
id: 'HikMall_30013234',
|
||||
time: '2024-12-26 15:05:10'
|
||||
|
||||
@ -89,6 +89,9 @@
|
||||
|
||||
const handleEdit = () => {
|
||||
// 实现编辑逻辑
|
||||
uni.navigateTo({
|
||||
url: '/pages/info-publish/edit-pic-video'
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
|
||||
138
src/pages/info-publish/release-plan.vue
Normal file
138
src/pages/info-publish/release-plan.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="h-[calc(100vh-0px)] flex flex-col">
|
||||
<TopNavigation title="发布计划"></TopNavigation>
|
||||
<scroll-view class="flex-1 box-border" scroll-y>
|
||||
<!-- 设备类型切换 -->
|
||||
<view class="device-tabs">
|
||||
<view
|
||||
v-for="(tab, index) in deviceTabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentDeviceTab === index }"
|
||||
@click="handleDeviceTabChange(index)"
|
||||
>
|
||||
<text>{{ tab.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态展示 -->
|
||||
<view class="empty-state" v-if="!hasData">
|
||||
<image class="empty-icon" src="/static/images/empty-box.png" mode="aspectFit" />
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部按钮组 -->
|
||||
<view class="footer">
|
||||
<button class="history-btn">下发记录</button>
|
||||
<button class="add-btn">添加计划</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 设备类型标签
|
||||
const deviceTabs = ref([{ name: '智慧屏' }, { name: '门禁' }])
|
||||
|
||||
// 当前选中的设备类型
|
||||
const currentDeviceTab = ref(0)
|
||||
|
||||
// 是否有数据
|
||||
const hasData = ref(false)
|
||||
|
||||
// 切换设备类型
|
||||
const handleDeviceTabChange = (index: number) => {
|
||||
currentDeviceTab.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.device-tabs {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
margin: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 200px;
|
||||
|
||||
.empty-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
gap: 12px; // 按钮之间的间距
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
button {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.history-btn {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
background: #4080ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/static/images/icon_publish_control_grey.png
Normal file
BIN
src/static/images/icon_publish_control_grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/static/images/icon_publish_home_blue.png
Normal file
BIN
src/static/images/icon_publish_home_blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Loading…
x
Reference in New Issue
Block a user