Skip to content

R
risk-monitor
提交 fb66f056 authored 作者: hsx's avatar hsx
浏览文件
操作

开发样式主页，目前规范了文字

上级 e14bae6c
隐藏空白字符变更
内嵌 并排
正在显示 包含 501 行增加 和 3 行删除
src/components/base/newsList/newsItem.vue 0 → 100644
浏览文件 @ fb66f056
<template>
<div class="box3-item" @click="handleToNewsAnalysis(news)">
<div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title"><span class="text-inner">{{ news[props.title] }}</span></div>
<div class="time">{{ news[props.from] }}</div>
</div>
<div class="right-footer">{{ news[props.content] }}</div>
</div>
</div>
</template>
<script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({
// 新闻列表数据
news: {
type: Object,
default: () => { }
},
img: {
type: String,
default: 'img'
},
title: {
type: String,
default: "title"
},
from: {
type: String,
default: "from"
},
content: {
type: String,
default: "content"
},
});
const emit = defineEmits(['item-click', 'more-click']);
const handleToNewsAnalysis = (item, index) => {
emit('item-click', item, index)
};
</script>
<style lang="scss" scoped>
.box3-item {
display: flex;
align-items: center;
height: 78px;
margin: 0px 21px;
cursor: pointer;
&:hover {
.right-top .title {
color: rgb(5, 95, 194) !important;
font-weight: 700;
}
.right-top .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
}
.left {
width: 97px;
// flex-shrink: 0;
height: 72px;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.right {
flex: 1;
min-width: 0;
margin-left: 20px;
.right-top {
display: flex;
justify-content: space-between;
.title {
// width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.text-inner {
border-bottom: 1px solid transparent;
}
}
.time {
text-align: right;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
height: 48px;
/* 调整为2行的高度：24px × 2 = 48px */
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: 2;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
}
}
</style>
\ No newline at end of file
src/components/base/people/personAvatar.vue 0 → 100644
浏览文件 @ fb66f056
<template>
<el-space @click="onClick(person)">
<ElAvatar :size="48" :src="person[img]" alignment="center" />
<el-space :size="0" direction="vertical" alignment="flex-start">
<div class="text-header">{{ person[name] }}</div>
<div class="person-position">{{ person[position] }}</div>
</el-space>
</el-space>
</template>
<script setup>
import '@/styles/common.scss'
import { ElSpace } from 'element-plus';
const props = defineProps({
// 新闻列表数据
person: {
type: Object,
default: () => { }
},
img: {
type: String,
default: 'avatarUrl'
},
name: {
type: String,
default: "name"
},
position: {
type: String,
default: "position"
},
introduction: {
type: String,
default: "introduction"
},
});
const emit = defineEmits(['item-click', 'more-click']);
const onClick = (item) => {
emit('item-click', item)
console.log(item)
};
</script>
<style lang="scss" scoped>
.person-position {
font-size: 16px;
line-height: 24px;
color: var(--text-primary-65-color);
}
</style>
\ No newline at end of file
src/components/devStyle/components/index.vue 0 → 100644
浏览文件 @ fb66f056
<script setup lang="ts">
import "@/styles/container.scss"
import TextStyle from './textStyle.vue';
import { ElScrollbar } from "element-plus";
</script>
<template>
<el-scrollbar>
<div class="common-page">
<text-style></text-style>
</div>
</el-scrollbar>
</template>
\ No newline at end of file
src/components/devStyle/components/textStyle.vue 0 → 100644
浏览文件 @ fb66f056
<template>
<div>
<div class="text-title-1-show">文字样式</div>
<table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;margin-top: 10px;">
<!-- 表头 -->
<thead>
<tr>
<th> 名称</th>
<th> 类型名称</th>
<th> 操作</th>
</tr>
</thead>
<!-- 表格内容 -->
<tbody>
<template v-for="(row, index) in tableData" :key="index">
<!-- 隔行变色效果 -->
<tr :style="{
height: '60px',
backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
}">
<!-- 名称列 -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div :class="row.className">
{{ row.name }}
</div>
</td>
<!-- 类型名称列（带复制功能） -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div @click="copyClassName(row.className)" style="cursor: pointer;">
<span>{{ row.className }}</span>
</div>
</td>
<!-- 操作列 -->
<td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
<el-button type="primary" link @click="copyClassName(row.className)">
<el-icon>
<DocumentCopy />
</el-icon>
复制
</el-button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue'
import "@/styles/common.scss"
import { copyToClipboard } from '@/utils/systemUtils'
// 表格数据
const tableData = ref([
// { name: '0级标题', className: 'text-title-0' },
{ name: '0级标题-加粗', className: 'text-title-0-bold' },
{ name: '0级标题-综艺', className: 'text-title-0-show' },
// { name: '1级标题', className: 'text-title-1' },
{ name: '1级标题-加粗', className: 'text-title-1-bold' },
{ name: '1级标题-综艺', className: 'text-title-1-show' },
{ name: '2级标题', className: 'text-title-2' },
{ name: '2级标题-加粗', className: 'text-title-2-bold' },
{ name: '2级标题-综艺', className: 'text-title-2-show' },
{ name: '3级标题', className: 'text-title-3' },
{ name: '3级标题-加粗', className: 'text-title-3-bold' },
{ name: '3级标题-综艺', className: 'text-title-3-show' },
{ name: '正文', className: 'text-regular' },
{ name: '正文-加粗', className: 'text-bold' },
{ name: '正文-紧凑', className: 'text-compact' },
{ name: '正文-紧凑-加粗', className: 'text-compact-bold' },
{ name: '1级提示文字', className: 'text-tip-1' },
{ name: '1级提示文字-加粗', className: 'text-tip-1-bold' },
{ name: '2级提示文字', className: 'text-tip-2' },
{ name: '2级提示文字-加粗', className: 'text-tip-2-bold' },
{ name: '3级提示文字', className: 'text-tip-3' },
])
// 复制类型名称到剪贴板
const copyClassName = async (className) => {
const { status, message } = await copyToClipboard(className)
if (status) {
ElMessage.success(message)
} else {
ElMessage.error(message)
}
}
</script>
<style scoped></style>
\ No newline at end of file
src/router/modules/devStyle.js 0 → 100644
浏览文件 @ fb66f056
//样式主页
import stylePages from "@/components/devStyle/components/index.vue";
const stylePagesRoutes = [
// 智库系统的主要路由
{
path: "/devStylePages",
name: "devStylePages",
component: stylePages,
meta: {
title: "开发样式",
dynamicTitle: true
}
},
]
export default stylePagesRoutes
\ No newline at end of file
src/styles/common.scss
浏览文件 @ fb66f056
...@@ -10,12 +10,141 @@ ...@@ -10,12 +10,141 @@
.flex-display{ .flex-display{
display: flex; display: flex;
} }
/***文本样式***/
.text-base{ .text-base{
color: var(--color-primary-90);
}
//0级标题
.text-title-0{
@extend .text-base;
color: var(--color-primary-90);
font-size: 32px;
}
.text-title-0-bold{
@extend .text-title-0;
font-weight: Bold;
}
.text-title-0-show{
@extend .text-title-0;
font-size: 48px;
font-family: "YouSheBiaoTiHei";
}
//1级标题
.text-title-1{
@extend .text-base;
color: var(--color-primary-90);
font-size: 24px;
}
.text-title-1-bold{
@extend .text-title-1;
font-weight: Bold;
}
.text-title-1-show{
@extend .text-title-1;
font-size: 30px;
font-family: "YouSheBiaoTiHei";
}
//2级标题
.text-title-2{
@extend .text-base;
color: var(--color-primary-90);
font-size: 20px;
line-height:26px;
}
.text-title-2-bold{
@extend .text-title-2;
font-weight: Bold;
}
.text-title-2-show{
@extend .text-title-2;
font-size: 24px;
font-family: "YouSheBiaoTiHei";
line-height: normal !important; // 取消继承的行高
}
//3级标题
.text-title-3{
@extend .text-base;
color: var(--color-primary-90);
font-size: 18px;
line-height:24px;
}
.text-title-3-bold{
@extend .text-title-3;
font-weight: Bold;
}
.text-title-3-show{
@extend .text-title-3;
font-size: 20px;
font-family: "YouSheBiaoTiHei";
line-height: normal !important; // 取消继承的行高
}
//正文
.text-regular{
@extend .text-base;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height:30px;
color: var(--text-primary-80-color);
} }
.text-header { //正文-加粗
.text-bold{
@extend .text-base; @extend .text-base;
font-weight: Bold; font-weight: Bold;
} }
//正文-紧凑
.text-compact{
@extend .text-base;
font-size: 16px;
line-height:24px;
}
.text-compact-bold{
@extend .text-base;
font-size: 16px;
line-height:24px;
font-weight: Bold;
}
//1级提示文字
.text-tip-1{
@extend .text-base;
color: var(--color-primary-90);
font-size: 16px;
line-height:24px;
}
.text-tip-1-bold{
@extend .text-tip-1;
font-weight: Bold;
}
//2级提示文字
.text-tip-2{
@extend .text-base;
color: var(--color-primary-90);
font-size: 14px;
line-height:22px;
}
.text-tip-2-bold{
@extend .text-tip-2;
font-weight: Bold;
}
//3级提示文字
.text-tip-3{
@extend .text-base;
color: var(--color-primary-90);
font-size: 12px;
}
src/utils/systemUtils.ts 0 → 100644
浏览文件 @ fb66f056
interface BaseReturn {
status: boolean;
message: string;
}
export async function copyToClipboard(txet: string): Promise<BaseReturn> {
try {
// 使用现代 Clipboard API
await navigator.clipboard.writeText(txet);
console.log("已复制:", txet);
return { status: true, message: "已复制:" + txet };
} catch (err) {
console.error("复制失败:", err);
// 降级方案：使用document.execCommand
const textArea = document.createElement("textarea");
textArea.value = txet;
document.body.appendChild(textArea);
textArea.select();
try {
const successful = document.execCommand("copy");
if (successful) {
return { status: true, message: "已复制:" + txet };
}
} catch (err) {}
document.body.removeChild(textArea);
return { status: false, message: "复制失败，请手动复制" };
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论