feat: 页面调整
This commit is contained in:
zoujing
@@ -1,5 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "./theme/index.css";
|
||||
@import "./tailwind.css";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
.bg {
|
||||
@@ -58,45 +59,56 @@ body {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #E5E8EE;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background-color: #F5F7FA !important;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 16px 20px !important;
|
||||
border-bottom: 1px solid #E5E8EE;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.el-dialog__close {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #525866;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 16px 20px !important;
|
||||
border-top: 1px solid #E5E8EE;
|
||||
}
|
||||
|
||||
.dialog-footer .el-button {
|
||||
border-radius: 8px !important;
|
||||
padding: 8px 10px !important;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-footer .el-button--primary {
|
||||
background: #2B7FFF !important;
|
||||
border-color: #2B7FFF !important;
|
||||
}
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before {
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before,
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before {
|
||||
content: "" !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
@@ -106,12 +118,14 @@ body {
|
||||
font-size: 14px !important;
|
||||
color: #171717 !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px !important;
|
||||
/* border: 1px solid #E5E8EE; */
|
||||
}
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:after, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:after {
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:after,
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:after {
|
||||
content: "*";
|
||||
color: #FF4949;
|
||||
margin-left: 3px;
|
||||
|
||||
34
src/renderer/styles/tailwind.css
Normal file
34
src/renderer/styles/tailwind.css
Normal file
@@ -0,0 +1,34 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
|
||||
}
|
||||
|
||||
/* Webkit */
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid transparent;
|
||||
/* 产生内边距，mac 风格关键 */
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
@@ -1,121 +1,80 @@
|
||||
<template>
|
||||
<div class="chat-guide">
|
||||
<div class="hero-area">
|
||||
<h1 class="greet">你好，<br/>我今天能帮你什么？</h1>
|
||||
<!-- 页面根节点：不滚动 -->
|
||||
<div class="h-full bg-white overflow-hidden">
|
||||
|
||||
<div class="input-wrap">
|
||||
<div class="tag">智能问数</div>
|
||||
<div class="fake-input">
|
||||
<div class="placeholder">给我发布或者布置任务</div>
|
||||
<div class="actions">
|
||||
<button class="link">🔗</button>
|
||||
<button class="send">✈</button>
|
||||
<!-- 唯一滚动容器 -->
|
||||
<div class="h-full overflow-y-auto">
|
||||
|
||||
<!-- Hero：吸顶 -->
|
||||
<div class="sticky top-0 z-20 bg-white px-12 pt-10 pb-6
|
||||
max-[800px]:px-5">
|
||||
<h1 class="text-[28px] font-bold mb-7 leading-tight">
|
||||
你好，<br />
|
||||
我今天能帮你什么？
|
||||
</h1>
|
||||
|
||||
<!-- input -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="inline-flex items-center justify-center w-[108px]
|
||||
px-3 py-1.5 rounded-2xl border border-[#E5E8EE]
|
||||
text-[13px] text-[#333]">
|
||||
智能问数
|
||||
</div>
|
||||
|
||||
<div class="h-[174px] bg-white rounded-lg border border-[#eef2f6]
|
||||
shadow-[0_1px_0_rgba(0,0,0,0.03)]
|
||||
p-[18px] flex flex-col justify-between">
|
||||
<div class="text-[#bfc9d4]">
|
||||
给我发布或者布置任务
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-header">
|
||||
<h3>任务中心</h3>
|
||||
<a class="edit">编辑</a>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<button class="text-[#9fb0c4]">🔗</button>
|
||||
<button class="bg-[#f1f6fb] px-2.5 py-1.5 rounded-md">
|
||||
✈
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-area">
|
||||
<div class="task-list">
|
||||
<div class="task-card" v-for="n in 14" :key="n">
|
||||
<div class="task-icon">销</div>
|
||||
<div class="task-body">
|
||||
<div class="task-title">每日销售数据</div>
|
||||
<div class="task-desc">分析用于销售渠道每日数据汇总及简要展示</div>
|
||||
<!-- header -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<h3 class="text-base font-semibold">任务中心</h3>
|
||||
<a class="text-[#3b82f6] text-[13px] cursor-pointer">
|
||||
编辑
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="px-12 pb-10 pt-4
|
||||
max-[800px]:px-5">
|
||||
<div class="grid grid-cols-2 gap-4
|
||||
max-[800px]:grid-cols-1">
|
||||
<div v-for="n in 14" :key="n" class="flex gap-3 items-start p-3.5
|
||||
rounded-[10px] border border-[#dfeaf6] bg-white">
|
||||
<div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
|
||||
border border-dashed border-[#9fc0e8]
|
||||
flex items-center justify-center
|
||||
text-[#3b82f6] text-[23px]">
|
||||
销
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-semibold">
|
||||
每日销售数据
|
||||
</div>
|
||||
<div class="text-[#9aa5b1] text-[13px] mt-1.5">
|
||||
分析用于销售渠道每日数据汇总及简要展示
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-guide {
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
background: #fff;
|
||||
padding: 40px 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #ffffff;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.greet {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
|
||||
.input-wrap { display:flex; flex-direction:column; align-items:stretch; gap:12px }
|
||||
.tag {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
width: 108px;
|
||||
padding:6px 10px;
|
||||
border-radius: 16px;
|
||||
background: transparent;
|
||||
color:#333;
|
||||
font-size:13px;
|
||||
border: 1px solid #E5E8EE;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fake-input {
|
||||
height: 174px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
border: 1px solid #eef2f6;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,0.03);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.placeholder { color:#bfc9d4 }
|
||||
.actions { display:flex; justify-content: space-between; align-items: center; width:100% }
|
||||
.actions .link { background:transparent; border:none; color:#9fb0c4 }
|
||||
.actions .send { background:#f1f6fb; border:none; padding:6px 10px; border-radius:6px }
|
||||
|
||||
.task-area { margin-top: 20px }
|
||||
.task-header { display:flex; justify-content:space-between; align-items:center; margin:16px 0 }
|
||||
.task-header h3 { margin:0; font-size:16px }
|
||||
.task-header .edit { color:#3b82f6; font-size:13px }
|
||||
|
||||
.task-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }
|
||||
.task-card {
|
||||
display:flex;
|
||||
gap:12px;
|
||||
align-items:flex-start;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #dfeaf6;
|
||||
background:#fff;
|
||||
}
|
||||
.task-icon { width:44px;height:44px;background: #EFF6FF; border-radius:8px;border:1px dashed #9fc0e8;display:flex;align-items:center;justify-content:center;color:#3b82f6; font-size: 23px; }
|
||||
.task-title { font-weight:600 }
|
||||
.task-desc { color:#9aa5b1; font-size:13px; margin-top:6px }
|
||||
|
||||
/* make content under hero scroll while hero stays sticky */
|
||||
.chat-guide::before{ content:''; display:block; height:8px }
|
||||
|
||||
@media (max-width: 800px){
|
||||
.chat-guide { padding:20px }
|
||||
.task-list { grid-template-columns: 1fr }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="bg-white h-full w-full p-[20px]">
|
||||
<div class="home-tab">
|
||||
<message-list />
|
||||
<div class="main-area">
|
||||
<div class="flex h-full w-full flex-col md:flex-row">
|
||||
<message-list class="flex-none w-64" />
|
||||
<div class="flex-1 overflow-auto p-5">
|
||||
<chat-guide />
|
||||
</div>
|
||||
</div>
|
||||
@@ -13,25 +13,3 @@
|
||||
import MessageList from './MessageList.vue'
|
||||
import ChatGuide from './ChatGuide.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-tab {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.home-tab > :first-child { flex: 0 0 260px }
|
||||
.main-area { flex: 1 1 auto; overflow: auto; padding: 20px }
|
||||
|
||||
/* match MessageList scrollbar: 8px, subtle thumb */
|
||||
.main-area { scrollbar-width: auto }
|
||||
.main-area::-webkit-scrollbar { width: 8px }
|
||||
.main-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
|
||||
.main-area::-webkit-scrollbar-track { background: transparent }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.home-tab { flex-direction: column }
|
||||
.home-tab > :first-child { flex: none; width: 100% }
|
||||
.main-area { padding: 12px }
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +1,34 @@
|
||||
<template>
|
||||
<aside class="msg-list">
|
||||
<header class="msg-list__header">
|
||||
<div class="brand">
|
||||
<img class="logo" src="@assets/images/login/white_logo.png"/>
|
||||
<div class="title">YINIAN</div>
|
||||
<aside class="w-64 h-screen box-border flex flex-col">
|
||||
<header class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="w-20 h-20 rounded-md object-cover" src="@assets/images/login/white_logo.png" />
|
||||
<div class="font-bold text-gray-800">YINIAN</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="new-row">
|
||||
<button class="new-btn">＋ 新对话</button>
|
||||
|
||||
<div class="mb-3 pl-4 pr-4">
|
||||
<button class="bg-white rounded-lg px-3 py-2 border shadow-sm w-full text-center">＋ 新对话</button>
|
||||
</div>
|
||||
|
||||
<div class="sections">
|
||||
<section v-for="group in groups" :key="group.title" class="group">
|
||||
<div class="group__title">
|
||||
<div class="overflow-y-auto p-4">
|
||||
<section v-for="group in groups" :key="group.title" class="mb-3">
|
||||
<div class="flex items-center justify-between text-sm text-gray-500 py-2">
|
||||
<span>{{ group.title }}</span>
|
||||
<span class="toggle">▾</span>
|
||||
<span class="text-gray-400 mr-4">▾</span>
|
||||
</div>
|
||||
|
||||
<ul class="items">
|
||||
<li v-for="item in group.items" :key="item.id" :class="['item', { active: item.id === selectedId }]" @click="select(item.id)">
|
||||
<span class="dot"></span>
|
||||
<div class="content">
|
||||
<div class="text">{{ item.title }}</div>
|
||||
<ul class="list-none p-1 mr-4">
|
||||
<li v-for="item in group.items" :key="item.id" @click="select(item.id)" :class="[
|
||||
'flex items-center gap-2 p-2 text-gray-600 rounded-lg cursor-pointer transition-colors',
|
||||
item.id === selectedId ? 'bg-white shadow-md border border-gray-200' : 'hover:bg-gray-50'
|
||||
]">
|
||||
<span class="w-2 h-2 rounded-full bg-sky-200 flex-none"></span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="truncate text-sm">{{ item.title }}</div>
|
||||
</div>
|
||||
<button v-if="item.id === selectedId" class="more">…</button>
|
||||
<button v-if="item.id === selectedId"
|
||||
class="bg-transparent border-0 text-gray-500 text-lg px-1 py-0">…</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
@@ -59,140 +64,44 @@ const groups = ref([
|
||||
{
|
||||
title: '近15天',
|
||||
items: [
|
||||
{ id: 1, title: '这是一段对话' },
|
||||
{ id: 2, title: '这是一段对话' },
|
||||
{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
|
||||
{ id: 4, title: '这是一段对话这是一段对话' },
|
||||
{ id: 5, title: '这是一段对话这是一段对话' }
|
||||
{ id: 10, title: '这是一段对话' },
|
||||
{ id: 11, title: '这是一段对话' },
|
||||
{ id: 12, title: '这是一段对话这是一段对话这是一段对话' },
|
||||
{ id: 13, title: '这是一段对话这是一段对话' },
|
||||
{ id: 14, title: '这是一段对话这是一段对话' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '近30天',
|
||||
items: [
|
||||
{ id: 6, title: '这是一段对话' },
|
||||
{ id: 7, title: '这是一段对话' },
|
||||
{ id: 8, title: '这是一段对话这是一段对话' },
|
||||
{ id: 9, title: '这是一段对话这是一段对话' }
|
||||
{ id: 15, title: '这是一段对话' },
|
||||
{ id: 16, title: '这是一段对话' },
|
||||
{ id: 17, title: '这是一段对话这是一段对话' },
|
||||
{ id: 18, title: '这是一段对话这是一段对话' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '近60天',
|
||||
items: [
|
||||
{ id: 1, title: '这是一段对话' },
|
||||
{ id: 2, title: '这是一段对话' },
|
||||
{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
|
||||
{ id: 4, title: '这是一段对话这是一段对话' },
|
||||
{ id: 5, title: '这是一段对话这是一段对话' }
|
||||
{ id: 19, title: '这是一段对话' },
|
||||
{ id: 20, title: '这是一段对话' },
|
||||
{ id: 21, title: '这是一段对话这是一段对话这是一段对话' },
|
||||
{ id: 22, title: '这是一段对话这是一段对话' },
|
||||
{ id: 23, title: '这是一段对话这是一段对话' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '近90天',
|
||||
items: [
|
||||
{ id: 6, title: '这是一段对话' },
|
||||
{ id: 7, title: '这是一段对话' },
|
||||
{ id: 8, title: '这是一段对话这是一段对话' },
|
||||
{ id: 9, title: '这是一段对话这是一段对话' }
|
||||
{ id: 24, title: '这是一段对话' },
|
||||
{ id: 25, title: '这是一段对话' },
|
||||
{ id: 26, title: '这是一段对话这是一段对话' },
|
||||
{ id: 27, title: '这是一段对话这是一段对话' }
|
||||
]
|
||||
},
|
||||
}
|
||||
])
|
||||
|
||||
function select(id: number) {
|
||||
selectedId.value = id
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:root {
|
||||
--bg: red;
|
||||
--muted: #1c4b7d;
|
||||
--dot: #BEDBFF;
|
||||
--border: #E5E6EB;
|
||||
--active-bg: #ffffff;
|
||||
--accent: #4fc3f7;
|
||||
}
|
||||
.msg-list {
|
||||
width: 260px;
|
||||
height: 100vh;
|
||||
background: var(--bg);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.msg-list__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
object-fit:cover;
|
||||
}
|
||||
.title { font-weight:700; color:#2b2f33 }
|
||||
.chev { color:var(--muted); transform: rotate(180deg); font-size:14px }
|
||||
.new-btn {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,0.04);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.new-row { margin: 12px }
|
||||
.new-row .new-btn { width: 100%; display: block; text-align: center; border: 1px solid #E5E6EB; }
|
||||
|
||||
.sections { overflow-y: auto; padding-right: 6px }
|
||||
.group { margin-bottom: 12px }
|
||||
.group__title {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 2px;
|
||||
}
|
||||
.items { list-style:none; padding: 4px 0; margin:0 }
|
||||
.item {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
padding: 10px 8px;
|
||||
color:#4a5560;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background .12s;
|
||||
}
|
||||
.item:not(.active):hover { background: rgba(0,0,0,0.02) }
|
||||
.item.active { background: var(--active-bg); box-shadow: 0 4px 8px rgba(17,24,39,0.06); border: 1px solid #E5E6EB; }
|
||||
.dot {
|
||||
width:8px;
|
||||
height:8px;
|
||||
border-radius:50%;
|
||||
background: #BEDBFF;
|
||||
flex: 0 0 8px;
|
||||
}
|
||||
.content { flex:1; min-width:0 }
|
||||
.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:14px }
|
||||
.more {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* scrollbar small */
|
||||
.sections::-webkit-scrollbar { width: 8px }
|
||||
.sections::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user