微调

src/components/Home/SearchResultsList.vue

@@ -21,7 +21,7 @@
                   <i class="el-icon-star-on"></i> <span>{{formatNumber(searchResult.startNum)}}</span>
               </div>
               <div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
-                  <div style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
+                  <div :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}"  style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
                   <span style="margin-left: 5px">{{searchResult.categoryName}}</span>
               </div>
           </div>
@@ -37,6 +37,19 @@ export default {
     },
     data(){
         return{
+            colorlists: [
+                'hsl(62,90%,49%)',
+                'hsl(138,63%,59%)',
+                'rgb(245,145,135)',
+                'rgb(111,235,245)',
+                'rgb(162,239,120)',
+                'rgb(43,255,255)',
+                'hsl(0,89%,63%)',
+                'rgb(241,125,191)',
+                'hsl(282,85%,64%)',
+                'rgb(255,202,0)',
+                'blueviolet'
+            ]
         }
     },
     methods:{

src/components/Project/ProjectList.vue

@@ -17,7 +17,7 @@
                         <span style="color: #59A3A4">{{ projectLists.projectName }}</span><span style="color: rgb(156 163 175);"> • </span>
                     </div>
                     <div>
-                        <div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
+                        <div class="circle" :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}" ></div>
                     </div>
                     <el-tag size="mini" style="margin-left: 5px" v-html="projectLists.categoryName"></el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
                     <div style="margin-left: 10px">
@@ -39,6 +39,21 @@ export default {
     name: "ProjectList",
     data(){
         return{
+            // 作答卡片颜色设置
+            colorlists: [
+                'hsl(62,90%,49%)',
+                'hsl(138,63%,59%)',
+                'rgb(245,145,135)',
+                'rgb(111,235,245)',
+                'rgb(162,239,120)',
+                'rgb(43,255,255)',
+                'hsl(0,89%,63%)',
+                'rgb(241,125,191)',
+                'hsl(282,85%,64%)',
+                'rgb(255,202,0)',
+                'blueviolet'
+            ]
+
         }
     },
     props: {
@@ -135,4 +150,7 @@ export default {
     flex-wrap: nowrap;
     align-items: center;
 }
+.circle{
+margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;
+}
 </style>

src/components/Project/RandomProjects.vue

@@ -15,7 +15,7 @@
                         <i class="el-icon-star-off"></i> <span>{{formatNumber(item.lookCount)}}</span>
                     </div>
                     <div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
-                        <div style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
+                        <div :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}"  style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
                         <span style="margin-left: 5px">{{item.categoryName}}</span>
                     </div>
                 </div>
@@ -32,6 +32,19 @@ export default {
     data(){
         return{
              randomProjectList:[],
+            colorlists: [
+                'hsl(62,90%,49%)',
+                'hsl(138,63%,59%)',
+                'rgb(245,145,135)',
+                'rgb(111,235,245)',
+                'rgb(162,239,120)',
+                'rgb(43,255,255)',
+                'hsl(0,89%,63%)',
+                'rgb(241,125,191)',
+                'hsl(282,85%,64%)',
+                'rgb(255,202,0)',
+                'blueviolet'
+            ]
         }
     },
     mounted() {

src/components/User/UserInfoPage.vue

@@ -58,7 +58,7 @@
                             </el-card>
                             <el-empty v-show="projectList.length===0" description="暂无项目" :image-size="115"></el-empty>
                             <div v-show="projectList.length!==0" v-for="(item,index) in projectList" :key="index">
-                                <UserProjects :project="item"></UserProjects>
+                                <UserProjects :project="item" :index="index"></UserProjects>
                             </div>
                         </el-tab-pane>
 
@@ -68,7 +68,7 @@
                             </el-card>
                             <el-empty v-show="like.length===0" description="暂无点赞" :image-size="115"></el-empty>
                             <div v-show="like.length!==0" v-for="(item,index) in like" :key="index">
-                                <UserProjects :project="item"></UserProjects>
+                                <UserProjects :project="item" :index="index"></UserProjects>
                             </div>
                         </el-tab-pane>
                     </el-tabs>

src/components/User/UserProjects.vue

@@ -12,7 +12,7 @@
                     <span style="display: flex;flex-direction: row;justify-content:flex-start;text-align: left;font-size: 16px;color: #9ca3af">{{brief}}</span>
                 </div>
                 <div style=" margin-left: 10px;;margin-top: 10px;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
-                    <div style="width: 10px;height: 10px;background-color: #42b983;border-radius: 50px"></div>
+                    <div :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}" style="width: 10px;height: 10px;background-color: #42b983;border-radius: 50px"></div>
                     <el-tag size="mini" style="margin-left: 5px;border-radius: 10px">
                         {{project.categoryName}}
                     </el-tag>
@@ -30,13 +30,26 @@
 export default {
     name: "UserProjects",
     props:{
-        project:Object
+        project:Object,
+        index:Number,
     },
 
 
     data(){
         return{
-
+            colorlists: [
+                'hsl(62,90%,49%)',
+                'hsl(138,63%,59%)',
+                'rgb(245,145,135)',
+                'rgb(111,235,245)',
+                'rgb(162,239,120)',
+                'rgb(43,255,255)',
+                'hsl(0,89%,63%)',
+                'rgb(241,125,191)',
+                'hsl(282,85%,64%)',
+                'rgb(255,202,0)',
+                'blueviolet'
+            ]
         }
     },
     computed:{