表单

src/views/components/expoHead.vue

@@ -59,14 +59,16 @@ export default Vue.extend({
       </div>
       <div v-if="popover_data.social_links" class="social_links">
         <div class="social-title">社交媒体</div>
-        <div v-if="popover_data.social_links.facebook" class="social-item">
-          <span>facebook：</span><span class="link" @click="goto(popover_data.social_links.facebook)">{{ popover_data.social_links.facebook }}</span>
-        </div>
-        <div v-if="popover_data.social_links.twitter" class="social-item">
-          <span>twitter：</span><span class="link" @click="goto(popover_data.social_links.twitter)">{{ popover_data.social_links.twitter }}</span>
-        </div>
-        <div v-if="popover_data.social_links.linkedin" class="social-item">
-          <span>linkedin：</span><span class="link" @click="goto(popover_data.social_links.linkedin)">{{ popover_data.social_links.linkedin }}</span>
+        <div class="social-list">
+          <div v-if="popover_data.social_links.facebook" class="social-item">
+            <span>facebook：</span><span class="link" @click="goto(popover_data.social_links.facebook)">{{ popover_data.social_links.facebook }}</span>
+          </div>
+          <div v-if="popover_data.social_links.twitter" class="social-item">
+            <span>twitter：</span><span class="link" @click="goto(popover_data.social_links.twitter)">{{ popover_data.social_links.twitter }}</span>
+          </div>
+          <div v-if="popover_data.social_links.linkedin" class="social-item">
+            <span>linkedin：</span><span class="link" @click="goto(popover_data.social_links.linkedin)">{{ popover_data.social_links.linkedin }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -90,6 +92,11 @@ export default Vue.extend({
       .social-title{
         font-weight: bold;
       }
+      .social-list{
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 16px;
+      }
       .social-item{
 
       }