From de0afd81d8f85df2a317eb5e04647e7ed4b9110f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Mon, 19 Sep 2022 16:04:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |    4 +-
 src/views/debate/debate.vue | 1574 ++++++++++++++++-------------------
 2 files changed, 717 insertions(+), 861 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a97c632..8546504 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="container">
-    <!-- <div id="nav">
+    <div id="nav">
       <router-link
         v-for="item in routes"
         :key="item.path"
@@ -12,7 +12,7 @@
       >
         {{ item.name }}
       </router-link>
-    </div> -->
+    </div>
     <main>
       <router-view />
     </main>
diff --git a/src/views/debate/debate.vue b/src/views/debate/debate.vue
index ae5f445..b79b77d 100644
--- a/src/views/debate/debate.vue
+++ b/src/views/debate/debate.vue
@@ -7,7 +7,6 @@
       <div>管理者进阶-腾飞班</div>
       <div style="margin-left: 6px; margin-right: 6px">/</div>
       <div style="font-weight: 700; font-size: 16px">辩论详情</div>
-
       <div class="preNext">
         <button class="btn btn01"></button>
         <span class="content">上一个</span>
@@ -22,332 +21,300 @@
     <!-- 详细信息 -->
     <div class="detailinfo">
       <div class="detail">
-        <div class="detailT">
-          <div style="margin-left: 48px; margin-right: 48px">
-            <div class="title">
-              <img
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
-              <div class="text">参与情况</div>
-              <div class="box"></div>
+        <!-- 左侧 -->
+        <div
+          style="margin-left: 48px; margin-right: 48px; background-color: pink"
+        >
+          <div class="title">
+            <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+            <div class="text">参与情况</div>
+            <div class="box"></div>
+          </div>
+          <!-- <div style="display: flex; align-items: center"></div> -->
+          <div class="all">
+            <div class="item allbox1">
+              <div class="item1" style="color: #089dff">123</div>
+              <div class="item2">参与数</div>
             </div>
-            <!-- <div style="display: flex; align-items: center"></div> -->
-            <div class="all">
-              <div class="item allbox1">
-                <div class="item1" style="color: #089dff">123</div>
-                <div class="item2">参与数</div>
-              </div>
-              <div class="item allbox2">
-                <div class="item1" style="color: #387df7">6172</div>
-                <div class="item2">总票数</div>
-              </div>
-              <div class="item allbox3">
-                <div class="item1" style="color: #00c6ff">11241</div>
-                <div class="item2">浏览数</div>
-              </div>
+            <div class="item allbox2">
+              <div class="item1" style="color: #387df7">6172</div>
+              <div class="item2">总票数</div>
             </div>
-            <div class="vsbox">
-              <div class="yes">
-                <div class="choose" style="color: #fe6a64; font-size: 14px">
-                  <div
-                    class="infor"
-                    style="padding-top: 26px; margin-left: 42px"
-                  >
-                    <span>熊*铭&nbsp;已选择正方观点</span>
-                    <span>2022.7.1</span>
-                  </div>
-                </div>
-                <div class="stay">
-                  <div class="stayinfor">保留</div>
-                  <div class="box"></div>
-                </div>
-                <div class="discuss">
-                  <img
-                    style="margin-left: 24px; margin-top: 17px"
-                    src="../../assets/image/yinhao.png"
-                  />
-                  <div class="titleinfor">
-                    关键人才掌握核心技术<br />
-                    人才流失会对团队带来不良影响
-                  </div>
-                  <div class="line"></div>
-                  <div class="xiongming">
-                    <div class="xmheader" style="">
-                      <img
-                        class="imgstyle"
-                        src="../../assets/image/avator.png"
-                      />
-                      <div
-                        style="
-                          display: inline-block;
-                          position: relative;
-                          top: -5px;
-                        "
-                      >
-                        <span
-                          class="headerxm"
-                          style="margin-left: 12px; margin-right: 140px"
-                        >
-                          熊*铭
-                        </span>
-                        <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                      </div>
-                      <div class="discusscontent">
-                        高阶人才不只对金钱有需求，就算有也是极少数，因为关键
-                        核心人才往往已经是能够独立、优秀的为企业创造价值了。
-                      </div>
-                    </div>
-                  </div>
-                  <div class="line" style="margin-top: 10px"></div>
-                  <div class="xiongming">
-                    <div class="xmheader" style="">
-                      <img
-                        class="imgstyle"
-                        src="../../assets/image/avator.png"
-                      />
-                      <div
-                        style="
-                          display: inline-block;
-                          position: relative;
-                          top: -5px;
-                        "
-                      >
-                        <span
-                          class="headerxm"
-                          style="margin-left: 12px; margin-right: 140px"
-                        >
-                          熊*铭
-                        </span>
-                        <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                      </div>
-                      <div class="discusscontent">
-                        根据调查，招聘同等能力的员工顶替跳槽者要增加百分之二
-                        十的人力成本；更重要的是，很多位置的员工需要一定的招
-                        聘时间和磨合周期，绝非如模具化零件那样，可以随时即装
-                        即用。因此，一般认为，招聘新员工会使得成本增加百分之
-                        五十左右。
-                      </div>
-                    </div>
-                  </div>
-                  <div class="line" style="margin-top: 10px"></div>
-                  <div class="xiongming">
-                    <div class="xmheader" style="">
-                      <img
-                        class="imgstyle"
-                        src="../../assets/image/avator.png"
-                      />
-                      <div
-                        style="
-                          display: inline-block;
-                          position: relative;
-                          top: -5px;
-                        "
-                      >
-                        <span
-                          class="headerxm"
-                          style="margin-left: 12px; margin-right: 140px"
-                        >
-                          熊*铭
-                        </span>
-                        <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                      </div>
-                      <div class="discusscontent">
-                        地球当然不会因为少了一个人而停转，但组织的运转却是依靠人的推动。一个螺丝钉被人拔走都可能导致机器运行故障而员工甚至还无法像零件那样被等价并且立刻得到替换。
-                      </div>
-                    </div>
-                  </div>
-                  <div class="yourdiscuss clearfix">
-                    <div class="your">留下你的评论</div>
-                  </div>
-                  <div>
-                    <button class="btn">提交</button>
-                  </div>
-                </div>
-                <div class="jindu1"></div>
-                <div class="jindu2"></div>
-              </div>
-              <div class="vs clearfix">
-                <img
-                  style="margin-top: 20px; margin-left: 85px"
-                  src="../../assets/image/VS.png"
-                />
-                <div class="count">
-                  <span style="color: #fe6a64">576票</span>
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                  <span style="color: #58a4e8">235票</span>
-                </div>
-                <div class="toupiao">
-                  <button class="btn btn1">投票</button>
-                  <button class="btn btn2">投票</button>
-                </div>
-              </div>
-              <div class="no">
-                <div class="choose" style="color: #58a4e8; font-size: 14px">
-                  <div
-                    class="infor"
-                    style="padding-top: 26px; margin-left: 42px"
-                  >
-                    <span>熊*铭&nbsp;已选择反方观点</span>
-                    <span>2022.7.1</span>
-                  </div>
-                </div>
-                <div class="stay">
-                  <div class="stayinfor">不保留</div>
-                  <div class="box"></div>
-                </div>
-                <div class="discuss">
-                  <img
-                    style="margin-left: 24px; margin-top: 17px"
-                    src="../../assets/image/yinhao2.png"
-                  />
-                  <div class="titleinfor">
-                    “能分开的都不是爱情”<br />
-                    留住的留不住心，随他去
-                  </div>
-                  <div class="line"></div>
-                  <div class="xiongming">
-                    <div class="xmheader" style="">
-                      <img
-                        class="imgstyle"
-                        src="../../assets/image/avator.png"
-                      />
-                      <div
-                        style="
-                          display: inline-block;
-                          position: relative;
-                          top: -5px;
-                        "
-                      >
-                        <span
-                          class="headerxm"
-                          style="margin-left: 12px; margin-right: 140px"
-                        >
-                          熊*铭
-                        </span>
-                        <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                      </div>
-                      <div class="discusscontent">
-                        高阶人才不只对金钱有需求，就算有也是极少数，因为关键
-                        核心人才往往已经是能够独立、优秀的为企业创造价值了。
-                      </div>
-                    </div>
-                  </div>
-                  <div class="line" style="margin-top: 10px"></div>
-                  <div class="xiongming">
-                    <div class="xmheader" style="">
-                      <img
-                        class="imgstyle"
-                        src="../../assets/image/avator.png"
-                      />
-                      <div
-                        style="
-                          display: inline-block;
-                          position: relative;
-                          top: -5px;
-                        "
-                      >
-                        <span
-                          class="headerxm"
-                          style="margin-left: 12px; margin-right: 140px"
-                        >
-                          熊*铭
-                        </span>
-                        <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                      </div>
-                      <div class="discusscontent">
-                        根据调查，招聘同等能力的员工顶替跳槽者要增加百分之二
-                        十的人力成本；更重要的是，很多位置的员工需要一定的招
-                        聘时间和磨合周期，绝非如模具化零件那样，可以随时即装
-                        即用。因此，一般认为，招聘新员工会使得成本增加百分之
-                        五十左右。
-                      </div>
-                    </div>
-                  </div>
-                  <div class="line" style="margin-top: 10px"></div>
-                  <div class="xiongming">
-                    <div class="xmheader" style="">
-                      <img
-                        class="imgstyle"
-                        src="../../assets/image/avator.png"
-                      />
-                      <div
-                        style="
-                          display: inline-block;
-                          position: relative;
-                          top: -5px;
-                        "
-                      >
-                        <span
-                          class="headerxm"
-                          style="margin-left: 12px; margin-right: 140px"
-                        >
-                          熊*铭
-                        </span>
-                        <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                      </div>
-                      <div class="discusscontent">
-                        地球当然不会因为少了一个人而停转，但组织的运转却是依靠人的推动。一个螺丝钉被人拔走都可能导致机器运行故障而员工甚至还无法像零件那样被等价并且立刻得到替换。
-                      </div>
-                    </div>
-                  </div>
-                  <div class="yourdiscuss clearfix">
-                    <div class="your">留下你的评论</div>
-                  </div>
-                  <div>
-                    <button class="btn">提交</button>
-                  </div>
-                </div>
-                <div class="jindu1"></div>
-                <div class="jindu2"></div>
-              </div>
+            <div class="item allbox3">
+              <div class="item1" style="color: #00c6ff">11241</div>
+              <div class="item2">浏览数</div>
             </div>
           </div>
-          <div class="right">
-            <div class="righttitle">
-              <img
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
-              <div class="text">辩论时间</div>
-              <div class="box"></div>
-            </div>
-            <div class="timebox clearfix">
-              <div class="innertime">
-                2022-7-20
-                00:00&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;2022-8-29
-                23:59:59
-              </div>
-              <div class="endtime clearfix">
-                <div class="endtimetext">
-                  距离结束还有&nbsp;&nbsp;
-                  <span class="te">123</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span
-                    class="te"
-                    >42</span
-                  >&nbsp;&nbsp;分钟
+          <div class="vsbox">
+            <div class="yes">
+              <!-- <div class="choose" style="color: #fe6a64; font-size: 14px">
+                <div class="infor" style="padding-top: 26px; margin-left: 42px">
+                  <span>熊*铭&nbsp;已选择正方观点</span>
+                  <span>2022.7.1</span>
                 </div>
               </div>
-            </div>
-            <div class="righttitle">
-              <img
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
-              <div class="text">辩论说明</div>
-              <div class="box"></div>
-            </div>
-            <div class="explain clearfix">
-              <div class="explaincontent">
-                为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式,每位学员可投票2个选项
-                ，我们将选 取最高选项的两个做后续讲解。
+              <div class="stay">
+                <div class="stayinfor">保留</div>
+                <div class="box"></div>
               </div>
+              <div class="discuss">
+                <img
+                  style="margin-left: 24px; margin-top: 17px"
+                  src="../../assets/image/yinhao.png"
+                />
+                <div class="titleinfor">
+                  关键人才掌握核心技术<br />
+                  人才流失会对团队带来不良影响
+                </div>
+                <div class="line"></div>
+                <div class="xiongming">
+                  <div class="xmheader" style="">
+                    <img class="imgstyle" src="../../assets/image/avator.png" />
+                    <div
+                      style="
+                        display: inline-block;
+                        position: relative;
+                        top: -5px;
+                      "
+                    >
+                      <span
+                        class="headerxm"
+                        style="margin-left: 12px; margin-right: 140px"
+                      >
+                        熊*铭
+                      </span>
+                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
+                    </div>
+                    <div class="discusscontent">
+                      高阶人才不只对金钱有需求，就算有也是极少数，因为关键
+                      核心人才往往已经是能够独立、优秀的为企业创造价值了。
+                    </div>
+                  </div>
+                </div>
+                <div class="line" style="margin-top: 10px"></div>
+                <div class="xiongming">
+                  <div class="xmheader" style="">
+                    <img class="imgstyle" src="../../assets/image/avator.png" />
+                    <div
+                      style="
+                        display: inline-block;
+                        position: relative;
+                        top: -5px;
+                      "
+                    >
+                      <span
+                        class="headerxm"
+                        style="margin-left: 12px; margin-right: 140px"
+                      >
+                        熊*铭
+                      </span>
+                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
+                    </div>
+                    <div class="discusscontent">
+                      根据调查，招聘同等能力的员工顶替跳槽者要增加百分之二
+                      十的人力成本；更重要的是，很多位置的员工需要一定的招
+                      聘时间和磨合周期，绝非如模具化零件那样，可以随时即装
+                      即用。因此，一般认为，招聘新员工会使得成本增加百分之
+                      五十左右。
+                    </div>
+                  </div>
+                </div>
+                <div class="line" style="margin-top: 10px"></div>
+                <div class="xiongming">
+                  <div class="xmheader" style="">
+                    <img class="imgstyle" src="../../assets/image/avator.png" />
+                    <div
+                      style="
+                        display: inline-block;
+                        position: relative;
+                        top: -5px;
+                      "
+                    >
+                      <span
+                        class="headerxm"
+                        style="margin-left: 12px; margin-right: 140px"
+                      >
+                        熊*铭
+                      </span>
+                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
+                    </div>
+                    <div class="discusscontent">
+                      地球当然不会因为少了一个人而停转，但组织的运转却是依靠人的推动。一个螺丝钉被人拔走都可能导致机器运行故障而员工甚至还无法像零件那样被等价并且立刻得到替换。
+                    </div>
+                  </div>
+                </div>
+                <div class="yourdiscuss clearfix">
+                  <div class="your">留下你的评论</div>
+                </div>
+                <div>
+                  <button class="btn">提交</button>
+                </div>
+              </div>
+              <div class="jindu1"></div>
+              <div class="jindu2"></div> -->
+            </div>
+            <div class="vs clearfix">
+              <img
+                style="margin-top: 20px; margin-left: 85px"
+                src="../../assets/image/VS.png"
+              />
+              <div class="count">
+                <span style="color: #fe6a64">576票</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span style="color: #58a4e8">235票</span>
+              </div>
+              <div class="toupiao">
+                <button class="btn btn1">投票</button>
+                <button class="btn btn2">投票</button>
+              </div>
+            </div>
+            <div class="no">
+              <!-- <div class="choose" style="color: #58a4e8; font-size: 14px">
+                <div class="infor" style="padding-top: 26px; margin-left: 42px">
+                  <span>熊*铭&nbsp;已选择反方观点</span>
+                  <span>2022.7.1</span>
+                </div>
+              </div>
+              <div class="stay">
+                <div class="stayinfor">不保留</div>
+                <div class="box"></div>
+              </div>
+              <div class="discuss">
+                <img
+                  style="margin-left: 24px; margin-top: 17px"
+                  src="../../assets/image/yinhao2.png"
+                />
+                <div class="titleinfor">
+                  “能分开的都不是爱情”<br />
+                  留住的留不住心，随他去
+                </div>
+                <div class="line"></div>
+                <div class="xiongming">
+                  <div class="xmheader" style="">
+                    <img class="imgstyle" src="../../assets/image/avator.png" />
+                    <div
+                      style="
+                        display: inline-block;
+                        position: relative;
+                        top: -5px;
+                      "
+                    >
+                      <span
+                        class="headerxm"
+                        style="margin-left: 12px; margin-right: 140px"
+                      >
+                        熊*铭
+                      </span>
+                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
+                    </div>
+                    <div class="discusscontent">
+                      高阶人才不只对金钱有需求，就算有也是极少数，因为关键
+                      核心人才往往已经是能够独立、优秀的为企业创造价值了。
+                    </div>
+                  </div>
+                </div>
+                <div class="line" style="margin-top: 10px"></div>
+                <div class="xiongming">
+                  <div class="xmheader" style="">
+                    <img class="imgstyle" src="../../assets/image/avator.png" />
+                    <div
+                      style="
+                        display: inline-block;
+                        position: relative;
+                        top: -5px;
+                      "
+                    >
+                      <span
+                        class="headerxm"
+                        style="margin-left: 12px; margin-right: 140px"
+                      >
+                        熊*铭
+                      </span>
+                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
+                    </div>
+                    <div class="discusscontent">
+                      根据调查，招聘同等能力的员工顶替跳槽者要增加百分之二
+                      十的人力成本；更重要的是，很多位置的员工需要一定的招
+                      聘时间和磨合周期，绝非如模具化零件那样，可以随时即装
+                      即用。因此，一般认为，招聘新员工会使得成本增加百分之
+                      五十左右。
+                    </div>
+                  </div>
+                </div>
+                <div class="line" style="margin-top: 10px"></div>
+                <div class="xiongming">
+                  <div class="xmheader" style="">
+                    <img class="imgstyle" src="../../assets/image/avator.png" />
+                    <div
+                      style="
+                        display: inline-block;
+                        position: relative;
+                        top: -5px;
+                      "
+                    >
+                      <span
+                        class="headerxm"
+                        style="margin-left: 12px; margin-right: 140px"
+                      >
+                        熊*铭
+                      </span>
+                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
+                    </div>
+                    <div class="discusscontent">
+                      地球当然不会因为少了一个人而停转，但组织的运转却是依靠人的推动。一个螺丝钉被人拔走都可能导致机器运行故障而员工甚至还无法像零件那样被等价并且立刻得到替换。
+                    </div>
+                  </div>
+                </div>
+                <div class="yourdiscuss clearfix">
+                  <div class="your">留下你的评论</div>
+                </div>
+                <div>
+                  <button class="btn">提交</button>
+                </div>
+              </div>
+              <div class="jindu1"></div>
+              <div class="jindu2"></div> -->
             </div>
           </div>
         </div>
+        <!-- 左侧 -->
       </div>
+      <!-- 右侧 -->
+      <!-- <div class="right">
+        <div class="righttitle">
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+          <div class="text">辩论时间</div>
+          <div class="box"></div>
+        </div>
+        <div class="timebox clearfix">
+          <div class="innertime">
+            2022-7-20
+            00:00&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;2022-8-29
+            23:59:59
+          </div>
+          <div class="endtime clearfix">
+            <div class="endtimetext">
+              距离结束还有&nbsp;&nbsp;
+              <span class="te">123</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span
+                class="te"
+                >42</span
+              >&nbsp;&nbsp;分钟
+            </div>
+          </div>
+        </div>
+        <div class="righttitle">
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+          <div class="text">辩论说明</div>
+          <div class="box"></div>
+        </div>
+        <div class="explain clearfix">
+          <div class="explaincontent">
+            为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式,每位学员可投票2个选项
+            ，我们将选 取最高选项的两个做后续讲解。
+          </div>
+        </div>
+      </div> -->
+      <!-- 右侧 -->
     </div>
     <!-- 详细信息 -->
   </div>
@@ -418,46 +385,217 @@ export default {
   }
 
   .detailinfo {
-    width: calc(100% + 20px);
+    width: 100%;
     margin-top: 20px;
     // height: 10px;
+    background: #ffffff;
+    border-radius: 8px;
+    color: rgba(51, 51, 51, 1);
     display: flex;
     .detail {
       flex: 1;
-      margin-right: 20px;
-      .detailT {
-        // height: 1000px;
-        background: #ffffff;
-        border-radius: 8px;
-        color: rgba(51, 51, 51, 1);
+      // margin-right: 20px;
+      // height: 1000px;
+      .title {
         display: flex;
-
-        .right {
-          .righttitle {
-            display: flex;
-            padding-top: 39px;
-            position: relative;
-            .text {
-              margin-left: 8px;
-              font-size: 16px;
-              color: rgba(51, 51, 51, 1);
-              font-weight: 800;
-            }
-            .box {
-              width: 75px;
-              height: 10px;
-              background-color: rgba(36, 120, 255, 0.15);
-              position: absolute;
-              left: 23px;
-              top: 53px;
+        align-items: center;
+        padding-top: 39px;
+        position: relative;
+      }
+      .title .text {
+        margin-left: 8px;
+        font-size: 16px;
+        color: rgba(51, 51, 51, 1);
+        font-weight: 800;
+      }
+      .title .box {
+        width: 75px;
+        height: 10px;
+        background-color: rgba(36, 120, 255, 0.15);
+        position: absolute;
+        left: 23px;
+        top: 53px;
+      }
+      .all {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 43px;
+        .allbox1 {
+          margin-right: 22px;
+          background: linear-gradient(
+            0deg,
+            rgba(160, 193, 230, 0) 0%,
+            rgba(161, 195, 231, 0.2) 100%
+          );
+        }
+        .allbox2 {
+          margin-right: 22px;
+          background: linear-gradient(
+            0deg,
+            rgba(177, 219, 229, 0) 0%,
+            rgba(172, 216, 227, 0.2) 100%
+          );
+        }
+        .allbox3 {
+          background: linear-gradient(
+            0deg,
+            rgba(195, 209, 234, 0) 0%,
+            rgba(191, 206, 231, 0.2) 100%
+          );
+        }
+        .item {
+          width: calc(100% - 44px);
+          height: 149px;
+          text-align: center;
+          border-radius: 4px;
+          .item1 {
+            color: #089dff;
+            font-size: 24px;
+            font-weight: bold;
+            margin-top: 36px;
+          }
+          .item2 {
+            color: #333330;
+            font-size: 14px;
+            margin-top: 29px;
+          }
+        }
+      }
+      .vsbox {
+        display: flex;
+        margin-top: 26px;
+        justify-content: space-between;
+        width: 100%;
+        background-color: red;
+        .yes {
+          position: relative;
+          width: calc((100% - 297px) / 2);
+          .choose {
+            width: 435px;
+            height: 66px;
+            background: #ffffff;
+            box-shadow: 0px 5px 18px 0px rgba(226, 104, 119, 0.09);
+            border-radius: 8px;
+            .infor {
+              width: 350px;
+              display: flex;
+              justify-content: space-between;
             }
           }
-          .timebox {
-            width: 417px;
-            height: 149px;
-            background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
-            border-radius: 4px;
-            margin-top: 42px;
+          .stay {
+            margin-top: 15px;
+            width: 435px;
+            height: 59px;
+            background: #faf1f1;
+            border-radius: 8px;
+            .stayinfor {
+              font-size: 18px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #fe6a64;
+              margin-left: 199px;
+              padding-top: 11px;
+            }
+            .box {
+              width: 43px;
+              height: 6px;
+              background: #fe6a64;
+              margin-top: 10px;
+              margin-left: 195px;
+            }
+          }
+          .discuss {
+            margin-top: 8px;
+            width: 435px;
+            // height: 763px;
+            background: linear-gradient(
+              0deg,
+              rgba(226, 104, 119, 0) 0%,
+              rgba(226, 104, 119, 0.1) 100%
+            );
+            border-radius: 8px;
+            .titleinfor {
+              // height: 41px;
+              width: 254px;
+              font-size: 18px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #fe6a64;
+              line-height: 24px;
+              margin-left: 92px;
+              margin-top: 44px;
+              text-align: center;
+            }
+            .line {
+              margin-left: 24px;
+              margin-top: 68px;
+              width: 377px;
+              // height: 1px;
+              border: 1px solid #fae4e7;
+            }
+            .imgstyle {
+              width: 24px;
+              height: 24px;
+              margin-left: 24px;
+              margin-top: 14px;
+            }
+            .headerxm {
+              color: #818a92;
+            }
+            .discusscontent {
+              width: 366px;
+              color: #333330;
+              margin-left: 24px;
+              margin-top: 10px;
+              font-size: 14px;
+              line-height: 24px;
+              font-family: PingFang-SC-Medium;
+            }
+          }
+          .yourdiscuss {
+            margin-top: 27px;
+            margin-left: 24px;
+            width: 377px;
+            height: 83px;
+            background: #faf1f1;
+            border-radius: 8px;
+            .your {
+              margin-left: 15px;
+              margin-top: 18px;
+              font-size: 14px;
+              font-family: PingFang SC;
+              font-weight: 500;
+              color: #818a92;
+              line-height: 24px;
+            }
+          }
+          .jindu1 {
+            position: absolute;
+            width: 4px;
+            height: 397px;
+            background: #fe826c;
+            opacity: 0.15;
+            border-radius: 2px;
+            right: 10px;
+            top: 355px;
+          }
+          .jindu2 {
+            position: absolute;
+            right: 10px;
+            top: 355px;
+            width: 4px;
+            height: 108px;
+            background: #fe826c;
+            border-radius: 2px;
+          }
+          .btn {
+            width: 377px;
+            height: 35px;
+            background: #fe7e6b;
+            border-radius: 8px;
+            border: 0;
+            color: #fff;
+            margin: 6px 0 20px 24px;
           }
           .clearfix:before,
           .clearfix:after {
@@ -465,66 +603,195 @@ export default {
             display: table;
             clear: both;
           }
-          .innertime {
-            margin-top: 17px;
-            margin-left: 55px;
-            font-size: 14px;
+        }
+
+        .vs {
+          width: 297px;
+          .count {
+            font-size: 18px;
             font-family: PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
+            font-weight: 800;
             line-height: 24px;
+            margin-top: 40px;
+            margin-left: 68px;
           }
-          .endtime {
-            margin-left: 10px;
-            margin-top: 16px;
-            width: 397px;
-            height: 81px;
-            background: #f2f5f7;
-            border-radius: 0px 8px 0px 8px;
-            .endtimetext {
-              margin-top: 25px;
-              margin-left: 46px;
-              .te {
-                font-size: 28px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                color: #4a9cf8;
-                line-height: 24px;
-              }
+          .toupiao {
+            .btn {
+              font-size: 14px;
+              font-family: PingFang SC;
+              font-weight: 500;
+              color: #ffffff;
+              line-height: 24px;
+              height: 38px;
+              width: 142px;
+              border: 0;
+              background-color: rgba(255, 255, 255, 0);
+            }
+            .btn1 {
+              margin-left: 20px;
+              margin-top: 45px;
+              background-image: url("../../assets/image/toupiao1.png");
+            }
+            .btn2 {
+              margin-left: -24px;
+              border-radius: 0px 15px 15px 0px;
+              background-image: url("../../assets/image/toupiao2.png");
             }
-          }
-          .explain {
-            margin-top: 30px;
-            width: 416px;
-            background: #f2f5f7;
-            border-radius: 8px;
-          }
-          .explaincontent {
-            width: 368px;
-            font-size: 16px;
-            font-family: PingFang SC;
-            font-weight: 500;
-            color: #333330;
-            line-height: 24px;
-            margin-left: 24px;
-            margin-top: 47px;
-            margin-bottom: 47px;
           }
         }
 
-        .title {
-          display: flex;
-          align-items: center;
-          padding-top: 39px;
+        .no {
           position: relative;
+          width: calc((100% - 297px) / 2);
+          .choose {
+            width: 435px;
+            height: 66px;
+            background: #ffffff;
+            box-shadow: 0px 5px 18px 0px rgba(226, 104, 119, 0.09);
+            border-radius: 8px;
+            .infor {
+              width: 350px;
+              display: flex;
+              justify-content: space-between;
+            }
+          }
+          .stay {
+            margin-top: 15px;
+            width: 435px;
+            height: 59px;
+            background: #eef6fd;
+            border-radius: 8px;
+            .stayinfor {
+              font-size: 18px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #58a4e8;
+              margin-left: 188px;
+              padding-top: 11px;
+            }
+            .box {
+              width: 43px;
+              height: 6px;
+              background: #58a4e8;
+              margin-top: 10px;
+              margin-left: 195px;
+            }
+          }
+          .discuss {
+            margin-top: 8px;
+            width: 435px;
+            // height: 763px;
+            background: linear-gradient(
+              0deg,
+              rgba(88, 164, 232, 0) 0%,
+              rgba(88, 164, 232, 0.1) 100%
+            );
+            border-radius: 8px;
+            .titleinfor {
+              // height: 41px;
+              width: 254px;
+              font-size: 18px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #58a4e8;
+              line-height: 24px;
+              margin-left: 92px;
+              margin-top: 44px;
+              text-align: center;
+            }
+            .line {
+              margin-left: 24px;
+              margin-top: 68px;
+              width: 377px;
+              // height: 1px;
+              border: 1px solid #deecfb;
+            }
+            .imgstyle {
+              width: 24px;
+              height: 24px;
+              margin-left: 24px;
+              margin-top: 14px;
+            }
+            .headerxm {
+              color: #818a92;
+            }
+            .discusscontent {
+              width: 366px;
+              color: #333330;
+              margin-left: 24px;
+              margin-top: 10px;
+              font-size: 14px;
+              line-height: 24px;
+              font-family: PingFang-SC-Medium;
+            }
+          }
+          .yourdiscuss {
+            margin-top: 27px;
+            margin-left: 24px;
+            width: 377px;
+            height: 83px;
+            background: #eff6fd;
+            border-radius: 8px;
+            .your {
+              margin-left: 15px;
+              margin-top: 18px;
+              font-size: 14px;
+              font-family: PingFang SC;
+              font-weight: 500;
+              color: #818a92;
+              line-height: 24px;
+            }
+          }
+          .jindu1 {
+            position: absolute;
+            width: 4px;
+            height: 397px;
+            background: #58a4e8;
+            opacity: 0.15;
+            border-radius: 2px;
+            right: 10px;
+            top: 355px;
+          }
+          .jindu2 {
+            position: absolute;
+            right: 10px;
+            top: 355px;
+            width: 4px;
+            height: 108px;
+            background: #58a4e8;
+            border-radius: 2px;
+          }
+          .btn {
+            width: 377px;
+            height: 35px;
+            background: #53a6e7;
+            border-radius: 8px;
+            border: 0;
+            margin: 6px 0 20px 24px;
+            color: #fff;
+          }
+          .clearfix:before,
+          .clearfix:after {
+            content: "";
+            display: table;
+            clear: both;
+          }
         }
-        .title .text {
+      }
+    }
+    .right {
+      margin-right: 45px;
+      .righttitle {
+        display: flex;
+        padding-top: 39px;
+        position: relative;
+        .text {
           margin-left: 8px;
           font-size: 16px;
           color: rgba(51, 51, 51, 1);
           font-weight: 800;
         }
-        .title .box {
+        .box {
           width: 75px;
           height: 10px;
           background-color: rgba(36, 120, 255, 0.15);
@@ -532,475 +799,64 @@ export default {
           left: 23px;
           top: 53px;
         }
-        .all {
-          display: flex;
-          justify-content: space-between;
-          width: 1280px;
-          margin-top: 43px;
-          .allbox1 {
-            background: linear-gradient(
-              0deg,
-              rgba(160, 193, 230, 0) 0%,
-              rgba(161, 195, 231, 0.2) 100%
-            );
-          }
-          .allbox2 {
-            background: linear-gradient(
-              0deg,
-              rgba(177, 219, 229, 0) 0%,
-              rgba(172, 216, 227, 0.2) 100%
-            );
-          }
-          .allbox3 {
-            background: linear-gradient(
-              0deg,
-              rgba(195, 209, 234, 0) 0%,
-              rgba(191, 206, 231, 0.2) 100%
-            );
-          }
-          .item {
-            width: 410px;
-            height: 149px;
-            text-align: center;
-            border-radius: 4px;
-            .item1 {
-              color: #089dff;
-              font-size: 24px;
-              font-weight: bold;
-              margin-top: 36px;
-            }
-            .item2 {
-              color: #333330;
-              font-size: 14px;
-              margin-top: 29px;
-            }
-          }
-        }
-        .vsbox {
-          display: flex;
-          width: 1280px;
-          margin-top: 26px;
-          justify-content: space-between;
-          .yes {
-            position: relative;
-            width: 435px;
-            .choose {
-              width: 435px;
-              height: 66px;
-              background: #ffffff;
-              box-shadow: 0px 5px 18px 0px rgba(226, 104, 119, 0.09);
-              border-radius: 8px;
-              .infor {
-                width: 350px;
-                display: flex;
-                justify-content: space-between;
-              }
-            }
-            .stay {
-              margin-top: 15px;
-              width: 435px;
-              height: 59px;
-              background: #faf1f1;
-              border-radius: 8px;
-              .stayinfor {
-                font-size: 18px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                color: #fe6a64;
-                margin-left: 199px;
-                padding-top: 11px;
-              }
-              .box {
-                width: 43px;
-                height: 6px;
-                background: #fe6a64;
-                margin-top: 10px;
-                margin-left: 195px;
-              }
-            }
-            .discuss {
-              margin-top: 8px;
-              width: 435px;
-              // height: 763px;
-              background: linear-gradient(
-                0deg,
-                rgba(226, 104, 119, 0) 0%,
-                rgba(226, 104, 119, 0.1) 100%
-              );
-              border-radius: 8px;
-              .titleinfor {
-                // height: 41px;
-                width: 254px;
-                font-size: 18px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                color: #fe6a64;
-                line-height: 24px;
-                margin-left: 92px;
-                margin-top: 44px;
-                text-align: center;
-              }
-              .line {
-                margin-left: 24px;
-                margin-top: 68px;
-                width: 377px;
-                // height: 1px;
-                border: 1px solid #fae4e7;
-              }
-              .imgstyle {
-                width: 24px;
-                height: 24px;
-                margin-left: 24px;
-                margin-top: 14px;
-              }
-              .headerxm {
-                color: #818a92;
-              }
-              .discusscontent {
-                width: 366px;
-                color: #333330;
-                margin-left: 24px;
-                margin-top: 10px;
-                font-size: 14px;
-                line-height: 24px;
-                font-family: PingFang-SC-Medium;
-              }
-            }
-            .yourdiscuss {
-              margin-top: 27px;
-              margin-left: 24px;
-              width: 377px;
-              height: 83px;
-              background: #faf1f1;
-              border-radius: 8px;
-              .your {
-                margin-left: 15px;
-                margin-top: 18px;
-                font-size: 14px;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #818a92;
-                line-height: 24px;
-              }
-            }
-            .jindu1 {
-              position: absolute;
-              width: 4px;
-              height: 397px;
-              background: #fe826c;
-              opacity: 0.15;
-              border-radius: 2px;
-              right: 10px;
-              top: 355px;
-            }
-            .jindu2 {
-              position: absolute;
-              right: 10px;
-              top: 355px;
-              width: 4px;
-              height: 108px;
-              background: #fe826c;
-              border-radius: 2px;
-            }
-            .btn {
-              width: 377px;
-              height: 35px;
-              background: #fe7e6b;
-              border-radius: 8px;
-              border: 0;
-              color: #fff;
-              margin: 6px 0 20px 24px;
-            }
-            .clearfix:before,
-            .clearfix:after {
-              content: "";
-              display: table;
-              clear: both;
-            }
-          }
-
-          .vs {
-            width: 297px;
-            .count {
-              font-size: 18px;
-              font-family: PingFang SC;
-              font-weight: 800;
-              line-height: 24px;
-              margin-top: 40px;
-              margin-left: 68px;
-            }
-            .toupiao {
-              .btn {
-                font-size: 14px;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #ffffff;
-                line-height: 24px;
-                height: 38px;
-                width: 142px;
-                border: 0;
-                background-color: rgba(255, 255, 255, 0);
-              }
-              .btn1 {
-                margin-left: 20px;
-                margin-top: 45px;
-                background-image: url("../../assets/image/toupiao1.png");
-              }
-              .btn2 {
-                margin-left: -24px;
-                border-radius: 0px 15px 15px 0px;
-                background-image: url("../../assets/image/toupiao2.png");
-              }
-            }
-          }
-
-          .no {
-            position: relative;
-            width: 435px;
-            .choose {
-              width: 435px;
-              height: 66px;
-              background: #ffffff;
-              box-shadow: 0px 5px 18px 0px rgba(226, 104, 119, 0.09);
-              border-radius: 8px;
-              .infor {
-                width: 350px;
-                display: flex;
-                justify-content: space-between;
-              }
-            }
-            .stay {
-              margin-top: 15px;
-              width: 435px;
-              height: 59px;
-              background: #eef6fd;
-              border-radius: 8px;
-              .stayinfor {
-                font-size: 18px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                color: #58a4e8;
-                margin-left: 188px;
-                padding-top: 11px;
-              }
-              .box {
-                width: 43px;
-                height: 6px;
-                background: #58a4e8;
-                margin-top: 10px;
-                margin-left: 195px;
-              }
-            }
-            .discuss {
-              margin-top: 8px;
-              width: 435px;
-              // height: 763px;
-              background: linear-gradient(
-                0deg,
-                rgba(88, 164, 232, 0) 0%,
-                rgba(88, 164, 232, 0.1) 100%
-              );
-              border-radius: 8px;
-              .titleinfor {
-                // height: 41px;
-                width: 254px;
-                font-size: 18px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                color: #58a4e8;
-                line-height: 24px;
-                margin-left: 92px;
-                margin-top: 44px;
-                text-align: center;
-              }
-              .line {
-                margin-left: 24px;
-                margin-top: 68px;
-                width: 377px;
-                // height: 1px;
-                border: 1px solid #deecfb;
-              }
-              .imgstyle {
-                width: 24px;
-                height: 24px;
-                margin-left: 24px;
-                margin-top: 14px;
-              }
-              .headerxm {
-                color: #818a92;
-              }
-              .discusscontent {
-                width: 366px;
-                color: #333330;
-                margin-left: 24px;
-                margin-top: 10px;
-                font-size: 14px;
-                line-height: 24px;
-                font-family: PingFang-SC-Medium;
-              }
-            }
-            .yourdiscuss {
-              margin-top: 27px;
-              margin-left: 24px;
-              width: 377px;
-              height: 83px;
-              background: #eff6fd;
-              border-radius: 8px;
-              .your {
-                margin-left: 15px;
-                margin-top: 18px;
-                font-size: 14px;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #818a92;
-                line-height: 24px;
-              }
-            }
-            .jindu1 {
-              position: absolute;
-              width: 4px;
-              height: 397px;
-              background: #58a4e8;
-              opacity: 0.15;
-              border-radius: 2px;
-              right: 10px;
-              top: 355px;
-            }
-            .jindu2 {
-              position: absolute;
-              right: 10px;
-              top: 355px;
-              width: 4px;
-              height: 108px;
-              background: #58a4e8;
-              border-radius: 2px;
-            }
-            .btn {
-              width: 377px;
-              height: 35px;
-              background: #53a6e7;
-              border-radius: 8px;
-              border: 0;
-              margin: 6px 0 20px 24px;
-              color: #fff;
-            }
-            .clearfix:before,
-            .clearfix:after {
-              content: "";
-              display: table;
-              clear: both;
-            }
+      }
+      .timebox {
+        width: 417px;
+        height: 149px;
+        background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
+        border-radius: 4px;
+        margin-top: 42px;
+      }
+      .clearfix:before,
+      .clearfix:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+      .innertime {
+        margin-top: 17px;
+        margin-left: 55px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 24px;
+      }
+      .endtime {
+        margin-left: 10px;
+        margin-top: 16px;
+        width: 397px;
+        height: 81px;
+        background: #f2f5f7;
+        border-radius: 0px 8px 0px 8px;
+        .endtimetext {
+          margin-top: 25px;
+          margin-left: 46px;
+          .te {
+            font-size: 28px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #4a9cf8;
+            line-height: 24px;
           }
         }
       }
-      .detailB {
-        min-height: 363px;
-        background: #ffffff;
+      .explain {
+        margin-top: 30px;
+        width: 416px;
+        background: #f2f5f7;
         border-radius: 8px;
-        margin-top: 20px;
-        .el-tabs__item {
-          height: 69px;
-          padding: 25px 7px 0px 52px;
-          font-size: 14px;
-          font-weight: 500;
-        }
-        .el-tabs__nav-wrap::after {
-          background-color: rgba(56, 125, 247, 0.2);
-        }
-        .enclosure {
-          height: 89px;
-          margin-left: 51px;
-          margin-right: 40px;
-          // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .enclosureL {
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            font-weight: 400;
-            color: #677d86;
-            line-height: 24px;
-          }
-          .download {
-            display: flex;
-            align-items: center;
-            font-size: 16px;
-            font-weight: 400;
-            color: #2478ff;
-            line-height: 24px;
-            cursor: pointer;
-          }
-        }
-        .work {
-          margin-left: 51px;
-          margin-right: 40px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-top: 37px;
-        }
-        .work .question {
-          font-size: 14px;
-          font-weight: 500;
-          color: #333330;
-          line-height: 18px;
-        }
-        .work .active {
-          width: 82px;
-          height: 28px;
-          background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
-          border-radius: 4px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #ffffff;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          margin-right: 11px;
-        }
-        .work .unactive {
-          width: 80px;
-          height: 26px;
-          border: 1px solid #a5d4e0;
-          border-radius: 4px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #a5d4e0;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 11px;
-          cursor: pointer;
-        }
-        .work .btncolor {
-          background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
-        }
-        .work .bordercolor {
-          border: 1px solid #85aad2;
-        }
-        .work .fontcolor {
-          color: rgba(133, 170, 210, 1);
-        }
-        .work .submit {
-          width: 126px;
-          height: 46px;
-          background: #2478ff;
-          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
-          border-radius: 4px;
-          font-size: 16px;
-          font-weight: 800;
-          color: #ffffff;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-        }
+      }
+      .explaincontent {
+        width: 368px;
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #333330;
+        line-height: 24px;
+        margin-left: 24px;
+        margin-top: 47px;
+        margin-bottom: 47px;
       }
     }
   }