相关样式修改

1bbcc2fa · 孙美琪 · d61c12c3 · 1bbcc2fa · 1bbcc2fa · 1bbcc2fa
Commit 1bbcc2fa authored Jun 14, 2024 by 孙美琪
6 changed files
--- a/src/assets/images/assemblyBg.jpg
+++ b/src/assets/images/assemblyBg.jpg
--- a/src/assets/logo/nscc-logo-copy.png
+++ b/src/assets/logo/nscc-logo-copy.png
--- a/src/layout/user-layout.vue
+++ b/src/layout/user-layout.vue
@@ -160,7 +160,8 @@ function logout () {
  width: 100%;
  .nav-bar-content {
-    width: 1280px;
+    //width: 1280px;
+    width: calc(100% - 226px);
    margin: 0 auto;
    height: 64px;
    display: flex;

--- a/src/views/componentServices/list.vue
+++ b/src/views/componentServices/list.vue
 <template>
  <div class="app-container">
-    <div style="width: 1280px;margin: 0 auto">
+    <div style="width: calc(100% - 190px);margin: 0 auto">
      <el-row :gutter="24">
        <el-col v-for="item in assemblyData" :key="item.id" :span="6">
          <div class="item flex">
@@ -19,17 +19,38 @@
        </el-col>
      </el-row>
    </div>
+    <el-dialog
+        v-model="dialogTableVisible"
+        :title="dialogTitle"
+        width="1600"
+    >
+      <div>
+        <iframe v-show="iframeShow" ref="iframe" :src="iframeSrc"
+                :style="{ width: iframeWidth + 'px', height: iframeHeight + 'px' }"></iframe>
+      </div>
+      <!--      <template #footer>-->
+      <!--        <div class="dialog-footer">-->
+      <!--          <el-button @click="cancel">关闭</el-button>-->
+      <!--        </div>-->
+      <!--      </template>-->
+    </el-dialog>
  </div>
 </template>
 <script setup name="ComponentServicesList">
-import { ref } from 'vue'
+import {ref} from 'vue'
-import { assemblyList } from '@/api/home.js'
+import {assemblyList} from '@/api/home.js'
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 const assemblyData = ref([])
+const iframeSrc = ref('')
+const iframeShow = ref(false)
+const dialogTableVisible = ref(false)
+const iframeWidth = ref(1560)
+const iframeHeight = ref(800)
+const dialogTitle = ref('')
-function getAassemblyList () {
+function getAassemblyList() {
  assemblyList().then(res => {
    assemblyData.value = res.data
  })
@@ -37,8 +58,17 @@ function getAassemblyList () {
 getAassemblyList()
-function openPage (data) {
+function openPage(data) {
-  window.open(data.url)
+  dialogTitle.value = data.title
+  iframeSrc.value = data.url
+  dialogTableVisible.value = true
+  iframeShow.value = true
+  // window.open(data.url)
+}
+function cancel() {
+  dialogTableVisible.value = false
+  iframeShow.value = false
 }
 </script>
 <style scoped lang="scss">
@@ -50,8 +80,9 @@ function openPage (data) {
 .item {
  height: 168px;
-  background: #FBFCFE;
+  //background: #FBFCFE;
-  border-radius: 3px;
+  background: url("@/assets/images/assemblyBg.jpg") no-repeat center center / cover;
+  border-radius: 15px;
  border: 1px solid #D8D9DB;
  padding: 24px 24px 0 24px;
  margin-bottom: 24px;
@@ -77,10 +108,23 @@ function openPage (data) {
  }
  img {
-    width: 64px;
+    width: 85px;
-    height: 64px;
+    height: 85px;
-    object-fit: cover;
+    object-fit: contain;
-    margin-right: 24px;
+    margin-right: 30px;
+    border-radius: 15px;
  }
 }
+.iframe-container {
+  position: absolute;
+  top: 10%;
+  left: 6%;
+}
+.iframe-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 </style>
--- a/src/views/computingResource/resourceList.vue
+++ b/src/views/computingResource/resourceList.vue
@@ -406,8 +406,8 @@ function submit () {
    width: 360px;
    height: 144px;
    background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF;
-    box-shadow: 0px 9px 28px 8px rgba(46, 119, 227, 0.02), 0px 6px 16px 0px rgba(46, 119, 227, 0.04), 0px 3px 6px -4px rgba(46, 119, 227, 0.06);
+    box-shadow: 0 9px 28px 8px rgba(46, 119, 227, 0.02), 0 6px 16px 0 rgba(46, 119, 227, 0.04), 0 3px 6px -4px rgba(46, 119, 227, 0.06);
-    border-radius: 0px 0px 0px 0px;
+    border-radius: 15px;
    border: 2px solid #FFFFFF;
    &:nth-child(2) {
@@ -504,8 +504,9 @@ function submit () {
 .product-card {
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
+  //box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.08);
-  border-radius: 0px 0px 0px 0px;
+  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.08);
+  border-radius: 15px;
  &:hover {
    border: 1px solid #2E77E3;
@@ -514,6 +515,7 @@ function submit () {
  .top-info {
    padding: 18px 20px 12px 20px;
+    border-radius: 15px 15px 0 0;
    background: linear-gradient(153deg, rgba(255, 175, 175, 0) 0%, #FDE7E7 100%), linear-gradient(145deg, #EDFCFF 0%, rgba(97, 227, 255, 0) 100%), #F0F6FF;
    .title {

--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -156,15 +156,15 @@
 </template>
 <script setup name="Index">
-import { banner, assemblyList, informationList } from '@/api/home.js'
+import {banner, assemblyList, informationList} from '@/api/home.js'
-import { ref } from 'vue'
+import {ref} from 'vue'
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 const assemblyData = ref([])
 const bannerImgList = ref([])
-function getBanner () {
+function getBanner() {
  banner().then(res => {
    bannerImgList.value = res.data
  })
@@ -172,7 +172,7 @@ function getBanner () {
 getBanner()
-function getAassemblyList () {
+function getAassemblyList() {
  assemblyList().then(res => {
    assemblyData.value = res.data.length > 3 ? res.data.slice(0, 3) : res.data
  })
@@ -183,7 +183,7 @@ getAassemblyList()
 const informationData = ref([])
 const informationMainData = ref({})
-function getInformation () {
+function getInformation() {
  informationList().then(res => {
    res.data.forEach(item => {
      item.year = new Date(item.createTime).getFullYear()
@@ -201,7 +201,7 @@ function getInformation () {
 getInformation()
-function openAssembly (data) {
+function openAssembly(data) {
  window.open(data.url)
 }
 </script>
@@ -227,7 +227,8 @@ function openAssembly (data) {
 }
 .block {
-  width: 1280px;
+  //width: 1280px;
+  width: calc(100% - 214px);
  margin: 0 auto;
 }
@@ -263,6 +264,7 @@ function openAssembly (data) {
  border: 1px solid #C8CBCC;
  border-radius: 2px;
  height: 40px;
+  color: #303233;
 }
 .resource-item {
@@ -391,8 +393,18 @@ function openAssembly (data) {
  }
 }
+//.information-right {
+//  //flex: 1;
+//  padding-right: 210px;
+//}
+//.information {
+//  width: 100%;
+//  padding: 0 214px;
+//}
 .information-item {
-  width: 470px;
+  width: 570px;
  &:hover {
    cursor: pointer;
@@ -418,8 +430,8 @@ function openAssembly (data) {
  img {
    margin-top: 25px;
-    width: 469px;
+    width: 569px;
-    height: 286px;
  }
  .date {