From f210b44395738b153f5876a773da36f83fd41e35 Mon Sep 17 00:00:00 2001 From: liangjiami <2249412933@qq.com> Date: Wed, 30 Jul 2025 16:47:15 +0800 Subject: [PATCH] 1 --- public/static/index/pc/css/public.css | 801 ++++++++++++++++---------- 1 file changed, 500 insertions(+), 301 deletions(-) diff --git a/public/static/index/pc/css/public.css b/public/static/index/pc/css/public.css index c4e2f5a6..ff9dd318 100755 --- a/public/static/index/pc/css/public.css +++ b/public/static/index/pc/css/public.css @@ -1,49 +1,50 @@ @font-face { - font-family: "Montserrat"; - src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; + font-family: "Montserrat"; + src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "Montserrat-Bold"; - src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); - font-weight: normal; - font-style: normal; + font-family: "Montserrat-Bold"; + src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "Montserrat-Medium"; - src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); - font-weight: normal; - font-style: normal; + font-family: "Montserrat-Medium"; + src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } ::-webkit-scrollbar { - width: 0.625rem; - background: #d2eafb; + width: 0.625rem; + background: #d2eafb; } ::-webkit-scrollbar-track { - border-radius: 0.5rem; - background: #eeeeee; + border-radius: 0.5rem; + background: #eeeeee; } * { - margin: 0; - padding: 0; - font-family: 'Montserrat'; + margin: 0; + padding: 0; + font-family: 'Montserrat'; } *:hover { - transition: all 0.2s linear; - -webkit-transition: all 0.2s linear; + transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; } + body { - font-size: 1.2em; - font-weight: 400; - color: #333; - --max-width: 1920px; + font-size: 1.2em; + font-weight: 400; + color: #333; + --max-width: 1920px; max-width: var(--max-width); margin: 0 auto; } @@ -52,24 +53,24 @@ select, input, textarea, button { - outline: none; - font-size: 0.875rem; - border-radius: 0; - -webkit-border-radius: 0; - color: #414446; - -moz-border-radius: 0; - -ms-border-radius: 0; - -o-border-radius: 0; + outline: none; + font-size: 0.875rem; + border-radius: 0; + -webkit-border-radius: 0; + color: #414446; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; } a { - color: #333; - cursor: pointer; - text-decoration: none; - transition: all 0.2s linear; - -webkit-transition: all 0.2s linear; - text-decoration: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + color: #333; + cursor: pointer; + text-decoration: none; + transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* img { @@ -77,160 +78,178 @@ a { } */ ul li { - padding: 2px 0; - list-style-type: none; + padding: 2px 0; + list-style-type: none; } ol, ul, a { - list-style: none; + list-style: none; } /* 修改垂直滚动条 */ ::-webkit-scrollbar { - width: 6px; - /* 修改宽度 */ + width: 6px; + /* 修改宽度 */ } /* 修改滚动条轨道背景色 */ ::-webkit-scrollbar-track { - background-color: transparent; + background-color: transparent; } /* 修改滚动条滑块颜色 */ ::-webkit-scrollbar-thumb { - background-color: #ccc; + background-color: #ccc; } /* 修改滚动条滑块悬停时的颜色 */ ::-webkit-scrollbar-thumb:hover { - background-color: #D8DFE8; + background-color: #D8DFE8; } /* 修改滚动条滑块移动时的颜色 */ ::-webkit-scrollbar-thumb:active { - background-color: #D8DFE8; + background-color: #D8DFE8; } /* 修改滚动条滑块的圆角 */ ::-webkit-scrollbar-thumb { - border-radius: 5px; + border-radius: 5px; } /* 整体滚动条 */ * { - scrollbar-width: thin; - /* 滚动条宽度 */ - scrollbar-color: #D8DBE6 transparent; - /* 滚动条颜色（滑块颜色 轨道颜色） */ + scrollbar-width: thin; + /* 滚动条宽度 */ + scrollbar-color: #D8DBE6 transparent; + /* 滚动条颜色（滑块颜色 轨道颜色） */ } /* 滚动条轨道 */ *::-moz-scrollbar-track { - background-color: #f0f0f0; + background-color: #f0f0f0; } /* 滚动条滑块 */ *::-moz-scrollbar-thumb { - background-color: #D8DBE6; - border-radius: 5px; - /* 滑块的圆角 */ + background-color: #D8DBE6; + border-radius: 5px; + /* 滑块的圆角 */ } /* 滚动条的上下箭头 */ *::-moz-scrollbar-button { - display: none; - /* 隐藏上下箭头 */ + display: none; + /* 隐藏上下箭头 */ } /* 滚动条的上下箭头：向上箭头 */ *::-moz-scrollbar-button:vertical:decrement { - display: none; + display: none; } /* 滚动条的上下箭头：向下箭头 */ *::-moz-scrollbar-button:vertical:increment { - display: none; + display: none; } -div{ + +div { display: block; } -#header{ + +#header { height: 60px; } + .backtop { - position: fixed; - right: 1.25rem; - padding: 10px 5px; - bottom: 10%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - color: #666; - font-size: 0.75rem; - background: #fff; - cursor: pointer; - border: 1px solid rgb(241, 241, 241); + position: fixed; + right: 1.25rem; + padding: 10px 5px; + bottom: 10%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + color: #666; + font-size: 0.75rem; + background: #fff; + cursor: pointer; + border: 1px solid rgb(241, 241, 241); } + .backtop .ictop { - height: 1.125rem; - width: 0.9375rem; - margin-bottom: 0.25rem; + height: 1.125rem; + width: 0.9375rem; + margin-bottom: 0.25rem; } + /*屏幕兼容性*/ -@media screen and (min-width:150px) and (max-width:749px){ - body{ - zoom: 0.6; - } +@media screen and (min-width:150px) and (max-width:749px) { + body { + zoom: 0.6; + } } -@media screen and (min-width:750px) and (max-width:1280px){ - body{ - zoom: 0.75; - } + +@media screen and (min-width:750px) and (max-width:1280px) { + body { + zoom: 0.75; + } } + @media screen and (min-width:1281px) and (max-width:1360px) { - body{ - zoom: 0.8; - } + body { + zoom: 0.8; + } } + @media screen and (min-width:1361px) and (max-width:1460px) { - body{ - zoom: 0.85; - } + body { + zoom: 0.85; + } } + @media screen and (min-width:1461px) and (max-width:1660px) { - body{ - zoom: 0.9; - } + body { + zoom: 0.9; + } } + @media screen and (min-width:1661px) and (max-width:1760px) { - body{ - zoom: 0.95; - } + body { + zoom: 0.95; + } } + @media screen and (min-width:1761px) and (max-width:1960px) {} + @media screen and (min-width:1980px) {} /*编辑器样式*/ -@charset "UTF-8";.ql-container { +@charset "UTF-8"; + +.ql-container { box-sizing: border-box; - font-family: Helvetica,Arial,sans-serif; + font-family: Helvetica, Arial, sans-serif; font-size: 13px; height: 100%; margin: 0; position: relative } -.ql-editor video{ + +.ql-editor video { max-width: 100% !important; } + .ql-container.ql-disabled .ql-tooltip { visibility: hidden } -.ql-editor video{ + +.ql-editor video { max-width: 100% !important; } + .ql-container.ql-disabled .ql-editor ul[data-checked]>li:before { pointer-events: none } @@ -266,17 +285,29 @@ div{ cursor: text } -.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6 { +.ql-editor p, +.ql-editor ol, +.ql-editor ul, +.ql-editor pre, +.ql-editor blockquote, +.ql-editor h1, +.ql-editor h2, +.ql-editor h3, +.ql-editor h4, +.ql-editor h5, +.ql-editor h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9 } -.ql-editor ol,.ql-editor ul { +.ql-editor ol, +.ql-editor ul { padding-left: 1.5em } -.ql-editor ol>li,.ql-editor ul>li { +.ql-editor ol>li, +.ql-editor ul>li { list-style-type: none } @@ -284,15 +315,18 @@ div{ content: "•" } -.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false] { +.ql-editor ul[data-checked=true], +.ql-editor ul[data-checked=false] { pointer-events: none } -.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li * { +.ql-editor ul[data-checked=true]>li *, +.ql-editor ul[data-checked=false]>li * { pointer-events: all } -.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before { +.ql-editor ul[data-checked=true]>li:before, +.ql-editor ul[data-checked=false]>li:before { color: #777; cursor: pointer; pointer-events: all @@ -323,11 +357,13 @@ div{ margin-right: -1.5em } -.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl) { +.ql-editor ol li:not(.ql-direction-rtl), +.ql-editor ul li:not(.ql-direction-rtl) { padding-left: 1.5em } -.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl { +.ql-editor ol li.ql-direction-rtl, +.ql-editor ul li.ql-direction-rtl { padding-right: 1.5em } @@ -337,7 +373,7 @@ div{ } .ql-editor ol li:before { - content: counter(list-0,decimal) ". " + content: counter(list-0, decimal) ". " } .ql-editor ol li.ql-indent-1 { @@ -345,7 +381,7 @@ div{ } .ql-editor ol li.ql-indent-1:before { - content: counter(list-1,lower-alpha) ". " + content: counter(list-1, lower-alpha) ". " } .ql-editor ol li.ql-indent-1 { @@ -357,7 +393,7 @@ div{ } .ql-editor ol li.ql-indent-2:before { - content: counter(list-2,lower-roman) ". " + content: counter(list-2, lower-roman) ". " } .ql-editor ol li.ql-indent-2 { @@ -369,7 +405,7 @@ div{ } .ql-editor ol li.ql-indent-3:before { - content: counter(list-3,decimal) ". " + content: counter(list-3, decimal) ". " } .ql-editor ol li.ql-indent-3 { @@ -381,7 +417,7 @@ div{ } .ql-editor ol li.ql-indent-4:before { - content: counter(list-4,lower-alpha) ". " + content: counter(list-4, lower-alpha) ". " } .ql-editor ol li.ql-indent-4 { @@ -393,7 +429,7 @@ div{ } .ql-editor ol li.ql-indent-5:before { - content: counter(list-5,lower-roman) ". " + content: counter(list-5, lower-roman) ". " } .ql-editor ol li.ql-indent-5 { @@ -405,7 +441,7 @@ div{ } .ql-editor ol li.ql-indent-6:before { - content: counter(list-6,decimal) ". " + content: counter(list-6, decimal) ". " } .ql-editor ol li.ql-indent-6 { @@ -417,7 +453,7 @@ div{ } .ql-editor ol li.ql-indent-7:before { - content: counter(list-7,lower-alpha) ". " + content: counter(list-7, lower-alpha) ". " } .ql-editor ol li.ql-indent-7 { @@ -429,7 +465,7 @@ div{ } .ql-editor ol li.ql-indent-8:before { - content: counter(list-8,lower-roman) ". " + content: counter(list-8, lower-roman) ". " } .ql-editor ol li.ql-indent-8 { @@ -441,7 +477,7 @@ div{ } .ql-editor ol li.ql-indent-9:before { - content: counter(list-9,decimal) ". " + content: counter(list-9, decimal) ". " } .ql-editor .ql-indent-1:not(.ql-direction-rtl) { @@ -658,11 +694,11 @@ div{ } .ql-editor .ql-font-serif { - font-family: Georgia,Times New Roman,serif + font-family: Georgia, Times New Roman, serif } .ql-editor .ql-font-monospace { - font-family: Monaco,Courier New,monospace + font-family: Monaco, Courier New, monospace } .ql-editor .ql-size-small { @@ -704,13 +740,15 @@ div{ right: 15px } -.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after { +.ql-snow.ql-toolbar:after, +.ql-snow .ql-toolbar:after { clear: both; content: ""; display: table } -.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button { +.ql-snow.ql-toolbar button, +.ql-snow .ql-toolbar button { background: none; border: none; cursor: pointer; @@ -723,51 +761,97 @@ div{ margin-right: 1px } -.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg { +.ql-snow.ql-toolbar button svg, +.ql-snow .ql-toolbar button svg { float: left; height: 100% } -.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover { +.ql-snow.ql-toolbar button:active:hover, +.ql-snow .ql-toolbar button:active:hover { outline: none } -.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file] { +.ql-snow.ql-toolbar input.ql-image[type=file], +.ql-snow .ql-toolbar input.ql-image[type=file] { display: none } -.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover { +.ql-snow.ql-toolbar button:hover, +.ql-snow .ql-toolbar button:hover, +.ql-snow.ql-toolbar button:focus, +.ql-snow .ql-toolbar button:focus, +.ql-snow.ql-toolbar .ql-picker-label:hover, +.ql-snow .ql-toolbar .ql-picker-label:hover, +.ql-snow.ql-toolbar .ql-picker-item:hover, +.ql-snow .ql-toolbar .ql-picker-item:hover { background-color: #f3f4f6 } -.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected { +.ql-snow.ql-toolbar button.ql-active, +.ql-snow .ql-toolbar button.ql-active, +.ql-snow.ql-toolbar .ql-picker-label.ql-active, +.ql-snow .ql-toolbar .ql-picker-label.ql-active, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected { background-color: #dbeafe; color: #2563eb } -.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { +.ql-snow.ql-toolbar button.ql-active .ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-fill, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, +.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: #2563eb } -.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { +.ql-snow.ql-toolbar button.ql-active .ql-stroke, +.ql-snow .ql-toolbar button.ql-active .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, +.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, +.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { stroke: #2563eb } @media (pointer: coarse) { - .ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active) { - color:#4b5563 + + .ql-snow.ql-toolbar button:hover:not(.ql-active), + .ql-snow .ql-toolbar button:hover:not(.ql-active) { + color: #4b5563 } - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { fill: #4b5563 } - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { stroke: #4b5563 } } -.ql-snow,.ql-snow * { +.ql-snow, +.ql-snow * { box-sizing: border-box } @@ -775,7 +859,8 @@ div{ display: none } -.ql-snow .ql-out-bottom,.ql-snow .ql-out-top { +.ql-snow .ql-out-bottom, +.ql-snow .ql-out-top { visibility: hidden } @@ -819,7 +904,8 @@ div{ stroke-width: 2 } -.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill { +.ql-snow .ql-fill, +.ql-snow .ql-stroke.ql-fill { fill: #4b5563 } @@ -831,7 +917,8 @@ div{ fill-rule: evenodd } -.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin { +.ql-snow .ql-thin, +.ql-snow .ql-stroke.ql-thin { stroke-width: 1 } @@ -886,7 +973,8 @@ div{ padding-left: 16px } -.ql-snow .ql-editor code,.ql-snow .ql-editor pre { +.ql-snow .ql-editor code, +.ql-snow .ql-editor pre { background-color: #f0f0f0; border-radius: 3px } @@ -975,15 +1063,18 @@ div{ z-index: 1 } -.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker { +.ql-snow .ql-color-picker, +.ql-snow .ql-icon-picker { width: 28px } -.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label { +.ql-snow .ql-color-picker .ql-picker-label, +.ql-snow .ql-icon-picker .ql-picker-label { padding: 2px 4px } -.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg { +.ql-snow .ql-color-picker .ql-picker-label svg, +.ql-snow .ql-icon-picker .ql-picker-label svg { right: 4px } @@ -1020,7 +1111,12 @@ div{ width: 18px } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before, +.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before, +.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before { content: attr(data-label) } @@ -1028,31 +1124,38 @@ div{ width: 98px } -.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before { +.ql-snow .ql-picker.ql-header .ql-picker-label:before, +.ql-snow .ql-picker.ql-header .ql-picker-item:before { content: "Normal" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before { content: "Heading 1" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before { content: "Heading 2" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before { content: "Heading 3" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before { content: "Heading 4" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before { content: "Heading 5" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before { content: "Heading 6" } @@ -1084,43 +1187,50 @@ div{ width: 108px } -.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before { +.ql-snow .ql-picker.ql-font .ql-picker-label:before, +.ql-snow .ql-picker.ql-font .ql-picker-item:before { content: "Sans Serif" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before { +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before { content: "Serif" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { content: "Monospace" } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before { - font-family: Georgia,Times New Roman,serif + font-family: Georgia, Times New Roman, serif } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { - font-family: Monaco,Courier New,monospace + font-family: Monaco, Courier New, monospace } .ql-snow .ql-picker.ql-size { width: 98px } -.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before { +.ql-snow .ql-picker.ql-size .ql-picker-label:before, +.ql-snow .ql-picker.ql-size .ql-picker-item:before { content: "Normal" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before { content: "Small" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before { content: "Large" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before { content: "Huge" } @@ -1147,7 +1257,7 @@ div{ .ql-toolbar.ql-snow { border: 1px solid #d1d5db; box-sizing: border-box; - font-family: Helvetica Neue,Helvetica,Arial,sans-serif; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; padding: 8px } @@ -1164,11 +1274,13 @@ div{ box-shadow: #0003 0 2px 8px } -.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { +.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label, +.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: #d1d5db } -.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { +.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, +.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { border-color: #000 } @@ -1225,7 +1337,8 @@ div{ line-height: 26px } -.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove { +.ql-snow .ql-tooltip.ql-editing a.ql-preview, +.ql-snow .ql-tooltip.ql-editing a.ql-remove { display: none } @@ -1259,9 +1372,10 @@ div{ border: 1px solid #d1d5db } -.editor,.ql-toolbar { - line-height: normal!important; - white-space: pre-wrap!important +.editor, +.ql-toolbar { + line-height: normal !important; + white-space: pre-wrap !important } .editor-img-uploader { @@ -1288,175 +1402,208 @@ div{ content: "请输入视频地址:" } -.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before { +.ql-snow .ql-picker.ql-size .ql-picker-label:before, +.ql-snow .ql-picker.ql-size .ql-picker-item:before { content: "12px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before { content: "10px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before { content: "18px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before { content: "32px" } -.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before { +.ql-snow .ql-picker.ql-header .ql-picker-label:before, +.ql-snow .ql-picker.ql-header .ql-picker-item:before { content: "文本" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before { content: "标题1" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before { content: "标题2" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before { content: "标题3" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before { content: "标题4" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before { content: "标题5" } -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before { +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]:before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before { content: "标题6" } -.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before { +.ql-snow .ql-picker.ql-font .ql-picker-label:before, +.ql-snow .ql-picker.ql-font .ql-picker-item:before { content: "标准字体" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before { +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before { content: "衬线字体" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { content: "等宽字体" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]:before { - font-family: SimSun,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]:before { + font-family: SimSun, sans-serif; content: "宋体" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]:before { - font-family: SimHei,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]:before { + font-family: SimHei, sans-serif; content: "黑体" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]:before { - font-family: Microsoft YaHei,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]:before { + font-family: Microsoft YaHei, sans-serif; content: "微软雅黑" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]:before { - font-family: KaiTi,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]:before { + font-family: KaiTi, sans-serif; content: "楷体" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]:before { - font-family: FangSong,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]:before { + font-family: FangSong, sans-serif; content: "仿宋" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]:before { - font-family: Arial,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]:before { + font-family: Arial, sans-serif; content: "Arial" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]:before { - font-family: Times New Roman,sans-serif; +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]:before { + font-family: Times New Roman, sans-serif; content: "Times New Roman" } -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]:before { +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]:before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]:before { font-family: sans-serif; content: "sans-serif" } .ql-font-SimSun { - font-family: SimSun,sans-serif + font-family: SimSun, sans-serif } .ql-font-SimHei { - font-family: SimHei,sans-serif + font-family: SimHei, sans-serif } .ql-font-Microsoft-YaHei { - font-family: Microsoft YaHei,sans-serif + font-family: Microsoft YaHei, sans-serif } .ql-font-KaiTi { - font-family: KaiTi,sans-serif + font-family: KaiTi, sans-serif } .ql-font-FangSong { - font-family: FangSong,sans-serif + font-family: FangSong, sans-serif } .ql-font-Arial { - font-family: Arial,sans-serif + font-family: Arial, sans-serif } .ql-font-Times-New-Roman { - font-family: Times New Roman,sans-serif + font-family: Times New Roman, sans-serif } .ql-font-sans-serif { font-family: sans-serif } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]:before { content: "12px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]:before { content: "14px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]:before { content: "16px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]:before { content: "18px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]:before { content: "20px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]:before { content: "22px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]:before { content: "24px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]:before { content: "26px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]:before { content: "28px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]:before { content: "30px" } -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]:before { +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]:before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]:before { content: "32px" } @@ -1464,143 +1611,195 @@ div{ /*tab切换样式*/ /* 标签页样式 */ .quill-tabs { - margin: 15px 0; - overflow: hidden; - border: 1px solid #dddddd; - border-radius: 4px; + margin: 15px 0; + overflow: hidden; + border: 1px solid #dddddd; + border-radius: 4px; } + /* 用伪元素添加图标（可替换为自己的图标） */ .ql-tabs::before { - font-size: 16px; - content: "T"; - /* 用 emoji 或字体图标 */ + font-size: 16px; + content: "T"; + /* 用 emoji 或字体图标 */ } + .quill-tab-list { - display: flex; - background-color: #f8f9fa; - border-bottom: 1px solid #dddddd; + display: flex; + background-color: #f8f9fa; + border-bottom: 1px solid #dddddd; } + .quill-tab-list .quill-tab-button { - padding: 10px 15px; - font-weight: 500; - cursor: pointer; - background: transparent; - border: none; - transition: background-color 0.2s; + padding: 10px 15px; + font-weight: 500; + cursor: pointer; + background: transparent; + border: none; + transition: background-color 0.2s; } + .quill-tab-list .quill-tab-button.active { - color: #007bff; - background-color: white; - border-bottom: 2px solid #007bff; + color: #007bff; + background-color: white; + border-bottom: 2px solid #007bff; } + .quill-tab-list .quill-tab-edit-btn { - display: flex; - align-items: center; - padding: 10px; - margin-left: auto; - color: #606266; - cursor: pointer; - background: transparent; - border: none; + display: flex; + align-items: center; + padding: 10px; + margin-left: auto; + color: #606266; + cursor: pointer; + background: transparent; + border: none; } + .quill-tab-list .quill-tab-edit-btn:hover { - color: #007bff; + color: #007bff; } + .quill-tab-button { - padding: 10px 15px; - font-weight: 500; - cursor: pointer; - background: transparent; - border: none; - transition: background-color 0.2s; + padding: 10px 15px; + font-weight: 500; + cursor: pointer; + background: transparent; + border: none; + transition: background-color 0.2s; } + .quill-tab-button.active { - color: #007bff; - background-color: white; - border-bottom: 2px solid #007bff; + color: #007bff; + background-color: white; + border-bottom: 2px solid #007bff; } + .quill-tab-content-list { - padding: 15px; + padding: 15px; } + .quill-tab-content { - display: none; + display: none; } + .quill-tab-content.active { - display: block; + display: block; } + /* 标签页标题编辑样式 */ .tab-title-edit { - display: flex; - align-items: center; + display: flex; + align-items: center; } -.tab-title-edit .title-text { - display: inline-block; - min-width: 60px; - padding: 0 4px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; -} -.tab-title-edit .title-input { - width: 100px; - margin: -2px 0; - /* 与标签对齐 */ -} -/*详情样式*/ -.o_detail_title {font-size:2.25em; color: #101010; margin-top:3.125vw; font-weight: 600; margin-bottom:1.25vw; line-height: 1.2em; text-align: center;background-color: #fff; overflow: hidden;} -.o_detail_small {font-size:1.5em; color: #333; margin-bottom:0.7vw;} -.o_detail_text {font-size:1em;color: #737373; line-height: 1.5em;width:80%; margin-left: auto; margin-right: auto; margin-bottom: 0.7vw;} +.tab-title-edit .title-text { + display: inline-block; + min-width: 60px; + padding: 0 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; +} + +.tab-title-edit .title-input { + width: 100px; + margin: -2px 0; + /* 与标签对齐 */ +} + +/*详情样式*/ +.o_detail_all { + text-align: center; + background-color: #fff; + overflow: hidden; +} +.o_detail_title { + font-size: 2.25em; + color: #101010; + margin-top: 2vw; + font-weight: 600; + margin-bottom: 1.25vw; + line-height: 1.2em; + text-align: center; + background-color: #fff; + overflow: hidden; + +} +.o_detail_small { + font-size: 1.5em; + color: #333; + margin-bottom: 0.7vw; +} +.o_detail_text { + font-size: 1em; + color: #737373; + line-height: 1.5em; + width: 80%; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.7vw; +} .products_des { - width: 100%; - margin-bottom: 50px; + width: 100%; + margin-bottom: 50px; } .products_des img { - width: 100%; + width: 100%; } + .de_t_n { - font-size: 1.5em; - color: #333; + font-size: 1.5em; + color: #333; } + .detail_title { - text-align: center; - padding: 2% 0; + text-align: center; + padding: 2% 0; } + .detail_title p { - line-height: 2em; + line-height: 2em; } + .detail_con_a { - margin: auto; - overflow: hidden; + margin: auto; + overflow: hidden; } + .lj_detail_text, .lj_detail_texts { - font-size: 0.875em; + font-size: 0.875em; } + .lj_detail_text p { - line-height: 1.6em; - padding: 0.5% 0; + line-height: 1.6em; + padding: 0.5% 0; } + /*seo-pro*/ .seo-pro h3 { - font-size: 1.5em; - text-align: center; - color: #333; - margin: 2% 0 1%; - line-height: 1.2; - font-weight: 400; + font-size: 1.5em; + text-align: center; + color: #333; + margin: 2% 0 1%; + line-height: 1.2; + font-weight: 400; } + .seo-pro p { - text-align: center; - margin: 0 0 11px; + text-align: center; + margin: 0 0 11px; } + .seo-pro a { - color: #333; - text-decoration: none; + color: #333; + text-decoration: none; } + .sa_blue, .sa_blue a, .seo-pro a:hover { - color: #009fdf; -} + color: #009fdf; +} \ No newline at end of file