点击进入协作

assets/css/common.css

@@ -67,4 +67,5 @@ img {
 :root {
   --fontColor: #515151;
   --mainWidth: 1000px;
+  --mainColor: #0093fd;
 }

pages/group/index.vue

@@ -7,34 +7,36 @@
           <h3>协作群组</h3>
           <p>适用于云端工作团队共享、管理日报和工时统计等</p>
         </section>
-        <el-button type="primary">创建</el-button>
+        <nuxt-link to="/group/create"><el-button type="primary">创建</el-button></nuxt-link>
       </section>
       <section v-if="list" class="list">
-        <section class="group-item" v-for="(item, index) of list" :key="index">
-          <section class="imgs" v-if="item.jobs.length === 1">
-            <template v-for="(job, idx) of item.jobs">
-              <img class="img" :src="job && job.icon_url" alt="icon_url" :key="idx">
-            </template>
+        <nuxt-link :to="`/group/${item.id}`" v-for="(item, index) of list" :key="index">
+          <section class="group-item">
+            <section class="imgs" v-if="item.jobs.length === 1">
+              <template v-for="(job, idx) of item.jobs">
+                <img class="img" :src="job && job.icon_url" alt="icon_url" :key="idx">
+              </template>
+            </section>
+            <section class="imgs" v-else-if="item.jobs.length === 2">
+              <template v-for="(job, idx) of item.jobs">
+                <img class="img two" :src="job && job.icon_url" alt="icon_url" :key="idx">
+              </template>
+            </section>
+            <section class="imgs" v-else>
+              <template v-for="(job, idx) of item.jobs">
+                <img
+                  v-if="idx < 3"
+                  class="img three"
+                  :src="job && job.icon_url"
+                  alt="icon_url"
+                  :key="idx"
+                >
+              </template>
+            </section>
+            <p class="name">{{item.name}}</p>
+            <p class="count">{{item.member_num}}</p>
           </section>
-          <section class="imgs" v-else-if="item.jobs.length === 2">
-            <template v-for="(job, idx) of item.jobs">
-              <img class="img two" :src="job && job.icon_url" alt="icon_url" :key="idx">
-            </template>
-          </section>
-          <section class="imgs" v-else>
-            <template v-for="(job, idx) of item.jobs">
-              <img
-                v-if="idx < 3"
-                class="img three"
-                :src="job && job.icon_url"
-                alt="icon_url"
-                :key="idx"
-              >
-            </template>
-          </section>
-          <p class="name">{{item.name}}</p>
-          <p class="count">{{item.member_num}}</p>
-        </section>
+        </nuxt-link>
       </section>
     </section>
   </ws-page>
@@ -99,7 +101,7 @@ export default {
 }
 .el-button {
   width: 100px;
-  background: #0093fd;
+  background: var(--mainColor);
 }
 .list {
   display: flex;
@@ -120,6 +122,9 @@ export default {
   color: #333;
   cursor: pointer;
 }
+.group-item:hover {
+  border: 1px solid var(--mainColor);
+}
 .imgs {
   position: relative;
   display: flex;