|
@@ -133,22 +133,24 @@ onMounted(() => {
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.overview {
|
|
.overview {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- // flex-wrap: wrap;
|
|
|
|
|
- // width: 100%;
|
|
|
|
|
- overflow-x: auto;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ flex-wrap: wrap; // 换行
|
|
|
}
|
|
}
|
|
|
.overview-item {
|
|
.overview-item {
|
|
|
// width: calc((100% - 84px) / 8);
|
|
// width: calc((100% - 84px) / 8);
|
|
|
// min-width: calc((100% - 84px) / 8);
|
|
// min-width: calc((100% - 84px) / 8);
|
|
|
// max-width: calc((100% - 84px) / 8);
|
|
// max-width: calc((100% - 84px) / 8);
|
|
|
- width: 180px;
|
|
|
|
|
- min-width: 180px;
|
|
|
|
|
|
|
+ min-width: 200px;
|
|
|
margin: 0 12px 12px 0;
|
|
margin: 0 12px 12px 0;
|
|
|
height: 175px;
|
|
height: 175px;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
transition: all .2s linear;
|
|
transition: all .2s linear;
|
|
|
background-color: #f7f8fa;
|
|
background-color: #f7f8fa;
|
|
|
|
|
+ div {
|
|
|
|
|
+ white-space: nowrap; /* 防止子级文本换行 */
|
|
|
|
|
+ flex-grow: 1; /* 允许子级根据内容撑开，但保持最小宽度限制 */
|
|
|
|
|
+ }
|
|
|
&:nth-child(8n) {
|
|
&:nth-child(8n) {
|
|
|
margin-right: 0;
|
|
margin-right: 0;
|
|
|
}
|
|
}
|
|
@@ -158,17 +160,4 @@ onMounted(() => {
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
font-size: 44px;
|
|
font-size: 44px;
|
|
|
}
|
|
}
|
|
|
-::-webkit-scrollbar {
|
|
|
|
|
- width: 10px;
|
|
|
|
|
- height: 6px;
|
|
|
|
|
- // display: none;
|
|
|
|
|
-}
|
|
|
|
|
-::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
|
|
|
|
|
- // 滚动条-颜色
|
|
|
|
|
- background: #c3c3c379;
|
|
|
|
|
-}
|
|
|
|
|
-::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
|
|
|
|
|
- // 滚动条-底色
|
|
|
|
|
- background: #e5e5e58f;
|
|
|
|
|
-}
|
|
|
|
|
</style>
|
|
</style>
|
