提交

src/views/report/Calendar/index.vue

@@ -1,101 +1,122 @@
 <template>
   <div class="calendar" :style="'font-size:' + fontSize + 'px'">
     <div
-      class="group content bg"
+      :class="{ group: true, content: true, bg: true }"
+      :style="index == dataOne.length - 1 ? 'margin:0' : ''"
       v-for="(item, index) in dataOne"
       :key="item.title + index"
     >
-      <img
-        :src="item.img_url"
-        alt=""
-        style="
-          width: 79vw;
-          max-width: 527px;
-          display: block;
-          margin: 3.6vh auto 0 auto;
-        "
-      />
-      <p class="headTitle" v-text="item.title"></p>
-      <div v-if="item.data.length">
-        <div v-for="(v1, i1) in item.data" :key="i1">
-          <!-- 月历主页 -->
-          <div class="monthlyCalendar" >
-            <div style="display: flex;" >
-                <div class="title" style="flex: 1;" v-text="v1.month"></div>
-                <div class="title" style="flex: 1;text-align: right;" v-text="v1.title"></div>
-            </div>
+      <div style="position: relative; z-index: 1">
+        <img
+          :src="item.img_url"
+          alt=""
+          style="
+            width: 79vw;
+            max-width: 527px;
+            display: block;
+            margin: 3.6vh auto 0 auto;
+          "
+        />
+        <p class="headTitle" v-text="item.title"></p>
+        <div v-if="item.data.length">
+          <div v-for="(v1, i1) in item.data" :key="i1">
+            <!-- 月历主页 -->
+            <div class="monthlyCalendar">
+              <div style="display: flex">
+                <div class="title" style="flex: 1" v-text="v1.month"></div>
+                <div
+                  class="title"
+                  style="flex: 1; text-align: right"
+                  v-text="v1.title"
+                ></div>
+              </div>
 
-            <div class="CalenMain">
-              <div class="CalenRow CalenHead">
-                <div class="CalenCol">
-                  <p>一</p>
-                  <!-- <p>MON</p> -->
-                </div>
-                <div class="CalenCol">
-                  <p>二</p>
-                  <!-- <p>TUE</p> -->
-                </div>
-                <div class="CalenCol">
-                  <p>三</p>
-                  <!-- <p>WED</p> -->
-                </div>
-                <div class="CalenCol">
-                  <p>四</p>
-                  <!-- <p>THU</p> -->
-                </div>
-                <div class="CalenCol">
-                  <p>五</p>
-                  <!-- <p>FRI</p> -->
-                </div>
-                <div class="CalenCol">
-                  <p>六</p>
-                  <!-- <p>SAT</p> -->
-                </div>
-                <div class="CalenCol">
-                  <p>日</p>
-                  <!-- <p>SUN</p> -->
+              <div class="CalenMain">
+                <div class="CalenRow CalenHead">
+                  <div class="CalenCol">
+                    <p>一</p>
+                    <!-- <p>MON</p> -->
+                  </div>
+                  <div class="CalenCol">
+                    <p>二</p>
+                    <!-- <p>TUE</p> -->
+                  </div>
+                  <div class="CalenCol">
+                    <p>三</p>
+                    <!-- <p>WED</p> -->
+                  </div>
+                  <div class="CalenCol">
+                    <p>四</p>
+                    <!-- <p>THU</p> -->
+                  </div>
+                  <div class="CalenCol">
+                    <p>五</p>
+                    <!-- <p>FRI</p> -->
+                  </div>
+                  <div class="CalenCol">
+                    <p>六</p>
+                    <!-- <p>SAT</p> -->
+                  </div>
+                  <div class="CalenCol">
+                    <p>日</p>
+                    <!-- <p>SUN</p> -->
+                  </div>
                 </div>
-              </div>
-              <div
-                class="CalenRow CalenBody"
-                v-for="(v, i) in v1.list"
-                :key="i"
-              >
-                <div v-for="(son, o) in v" :key="o" class="CalenCol">
-                  <div v-if="son" style="color: #000">
-                    <div class="dayDate">
-                      <div
-                        class="dayDate_son"
-                        :style="
-                          son.weeks == 0 || son.weeks == 6
-                            ? 'color:#c31212'
-                            : ''
-                        "
-                      >
-                        {{ son.day }}
+                <div
+                  class="CalenRow CalenBody"
+                  v-for="(v, i) in v1.list"
+                  :key="i"
+                >
+                  <div v-for="(son, o) in v" :key="o" class="CalenCol">
+                    <div v-if="son" style="color: #000">
+                      <div class="dayDate">
+                        <div
+                          class="dayDate_son"
+                          :style="
+                            son.weeks == 0 || son.weeks == 6
+                              ? 'color:#c31212'
+                              : ''
+                          "
+                        >
+                          {{ son.day }}
+                        </div>
                       </div>
+                      <div
+                        v-if="son.value"
+                        class="text"
+                        v-text="son.value"
+                      ></div>
+                      <div v-if="!son.value" style="1em"></div>
                     </div>
-                    <div v-if="son.value" class="text" v-text="son.value"></div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <img
+          src="@/assets/image/logo.png"
+          v-if="index == dataOne.length - 1"
+          style="
+            width: 18.8vw;
+            max-width: 125px;
+            margin: 0.5em auto;
+            display: block;
+            position: relative;
+            z-index: 2;
+          "
+          alt=""
+        />
+        <div class="bottom content" v-if="index == dataOne.length - 1">
+          本数据由“陕西广电融媒体集团大数据平台”提供。
+          <p>
+            技术支持
+            <span style="white-space: nowrap">白帆13325452244;</span
+            ><span style="white-space: nowrap">陈科18629350958。</span>
+          </p>
+        </div>
       </div>
     </div>
-    <img
-      src="@/assets/image/logo.png"
-      style="width: 18.8vw; max-width: 125px; margin: 1em auto; display: block"
-      alt=""
-    />
-    <div class="bottom content">
-      本数据由“陕西广电融媒体集团大数据平台”提供。
-      <p>
-        技术支持 <span style="white-space: nowrap">白帆13325452244;</span
-        ><span style="white-space: nowrap">陈科18629350958。</span>
-      </p>
-    </div>
   </div>
 </template>
 
@@ -200,6 +221,8 @@ export default {
   padding-left: 5px;
   font-weight: 600;
   overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
 .content {
   margin: 0 auto;
@@ -208,6 +231,7 @@ export default {
 
 .group {
   margin-bottom: 2em;
+  position: relative;
 }
 
 .headTitle {
@@ -217,7 +241,7 @@ export default {
   font-weight: bold;
   color: #be651a;
   line-height: 30px;
-  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
+  text-shadow: 0 0 10px #fff;
 }
 
 .headSubTitle {
@@ -248,12 +272,21 @@ export default {
     height: 117vw; */
 }
 
+.bgImg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
 .title {
   font-size: 1rem;
   font-family: STHupo;
   font-weight: 600;
   line-height: 30px;
-  padding: .5em .8em;
+  padding: 0.5em 0.8em;
 }
 
 .CalenRow {
@@ -285,7 +318,7 @@ export default {
   color: #000;
   background-color: #f4f4f4;
   transform: rotate(45deg);
-  margin: 0 auto .3em auto;
+  margin: 0 auto 0.3em auto;
 }
 
 .dayDate_son {