词云

src/views/expert/list/index.vue

@@ -34,6 +34,9 @@
               type="button"
               class="cloud-word"
               :style="{
+                left: word.left,
+                top: word.top,
+                '--rotate': `${word.rotate}deg`,
                 fontSize: `${word.size}px`,
                 color: word.color,
                 transform: `rotate(${word.rotate}deg)`
@@ -219,14 +222,15 @@ const selectedEducation = ref('')
 const selectedTeam = ref('')
 
 const wordCloudWords = [
-  { text: '软件工程', size: 28, rotate: -4, color: '#315b73' },
-  { text: '金融风险', size: 22, rotate: 3, color: '#a15e3f' },
-  { text: '互联网产品', size: 18, rotate: -2, color: '#607d70' },
-  { text: '项目管理', size: 16, rotate: 5, color: '#6d7480' },
-  { text: '数字化转型', size: 24, rotate: 1, color: '#406b82' },
-  { text: '战略规划', size: 15, rotate: -5, color: '#9a755d' },
-  { text: '数据治理', size: 19, rotate: 2, color: '#72876f' },
-  { text: '风险控制', size: 14, rotate: -1, color: '#78818a' }
+  { text: '地质', size: 24, rotate: -8, color: '#7fcd72', left: '8%', top: '52%' },
+  { text: '油藏', size: 30, rotate: 6, color: '#8ea4d8', left: '26%', top: '38%' },
+  { text: '钻井', size: 27, rotate: -10, color: '#f0df62', left: '46%', top: '22%' },
+  { text: '采油工艺', size: 22, rotate: 8, color: '#b26c41', left: '60%', top: '14%' },
+  { text: '压裂', size: 21, rotate: -16, color: '#3d79a5', left: '74%', top: '48%' },
+  { text: '酸化', size: 18, rotate: 12, color: '#f1b477', left: '14%', top: '16%' },
+  { text: '修井', size: 19, rotate: -12, color: '#d26ea8', left: '36%', top: '66%' },
+  { text: '博士', size: 17, rotate: 5, color: '#7e8d64', left: '58%', top: '64%' },
+  { text: '研究生', size: 16, rotate: -5, color: '#7f85b5', left: '79%', top: '28%' }
 ]
 
 const educationOptions = [
@@ -310,15 +314,15 @@ const handleWordClick = (word: string) => {
   display: grid;
   grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
   gap: 18px;
-  margin-bottom: 26px;
+  margin-bottom: 15px;
 }
 
 .filter-panel,
 .word-cloud-panel {
   min-width: 0;
-  padding: 22px;
+  padding: 12px;
   border: 1px solid rgba(28, 44, 62, 0.1);
-  border-radius: 12px;
+  border-radius: 8px;
   box-sizing: border-box;
 }
 
@@ -428,23 +432,25 @@ const handleWordClick = (word: string) => {
 .word-cloud {
   position: relative;
   z-index: 1;
-  display: flex;
-  min-height: 132px;
-  align-items: center;
-  justify-content: center;
-  gap: 10px 16px;
-  padding: 22px 8px 4px;
-  flex-wrap: wrap;
+  min-height: 180px;
+  margin-top: 4px;
+  border-radius: 12px;
+  background: radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.72), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18));
+  overflow: hidden;
 }
 
 .cloud-word {
+  position: absolute;
   border: 0;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  font-family: Georgia, 'Times New Roman', serif;
   font-weight: 600;
   letter-spacing: -0.03em;
+  line-height: 1;
+  white-space: nowrap;
+  transform-origin: center;
   transition:
     transform 180ms ease,
     opacity 180ms ease,
@@ -454,6 +460,7 @@ const handleWordClick = (word: string) => {
 .cloud-word:hover {
   opacity: 0.72;
   text-shadow: 0 5px 12px rgba(49, 91, 115, 0.18);
+  transform: scale(1.06) rotate(var(--rotate, 0deg));
 }
 
 .cloud-word:focus-visible {
@@ -473,7 +480,6 @@ const handleWordClick = (word: string) => {
 
 .result-count {
   color: #9aa6b3;
-  font-family: 'Courier New', monospace;
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -559,6 +565,7 @@ const handleWordClick = (word: string) => {
 .table-list {
   width: 100%;
   overflow: hidden;
+  border-radius: 8px;
 }
 
 .ladder-row {
@@ -567,6 +574,7 @@ const handleWordClick = (word: string) => {
   max-width: 100%;
   min-width: 0;
   min-height: 78px;
+
   transform: translateX(0);
   animation: row-in 0.55s both;
   transition:
@@ -609,7 +617,6 @@ const handleWordClick = (word: string) => {
 
 .team-index {
   color: rgba(24, 37, 54, 0.38);
-  font-family: 'Courier New', monospace;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -736,7 +743,6 @@ const handleWordClick = (word: string) => {
 
 .detail-label {
   color: #467da4;
-  font-family: 'Courier New', monospace;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.12em;
@@ -773,7 +779,7 @@ const handleWordClick = (word: string) => {
   }
 
   .word-cloud {
-    min-height: 112px;
+    min-height: 160px;
   }
 
   .intro-meta {