前台页面-首页修改

查看更多
详情跳转

src/router/routes/index.ts

@@ -173,6 +173,14 @@ export const PCFontRoute: AppRouteRecordRaw = {
         title: '',
       },
     },
+    {
+      path: '/aaaFont/font/moreData',
+      name: 'moreData',
+      component: () => import('@/views/AAAFont/front/moreData/index.vue'),
+      meta: {
+        title: '',
+      },
+    },
   ],
 };
 // export const fontRoute: AppRouteRecordRaw = {

src/views/AAAFont/front/moreData/index.vue

+<template>
+  <div class="mainContainer" id="main">
+    <div class="subContainer">
+      <div class="item-content-box">
+        <div class="commonContainer">
+
+          <h3 class="content-item-h3">数据公示</h3>
+          <span class="title_bottom">共114条数据，公示期为10个工作日</span>
+          <div class="tab-pane">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane name="first">
+                <template #label>
+                  <span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
+                    >数据平台(112)</span
+                  >
+                </template>
+                <el-row :gutter="20">
+                  <el-col class="mt-5" :span="8" v-for="card in cardsData" :key="card.title">
+                    <el-card>
+                      <template #header>
+                        <div>
+                          <div style="display: flex; align-items: center">
+                            <img :src="cardLogo" />
+                            <span class="ml-4" style="font-size: 20px; font-weight: 550">{{
+                              card.title
+                            }}</span>
+                          </div>
+                        </div>
+                      </template>
+                      <div class="card-row">
+                        <div class="card-left">
+                          <p>申请人</p>
+                          <p>数据来源</p>
+                          <p>应用场景</p>
+                          <p>算法规则简要说明</p>
+                          <p></p>
+                          <p>公示截止时间</p>
+                        </div>
+                        <div class="card-right">
+                          <p>{{ card.applicant }}</p>
+                          <p>{{ card.dataSource }}</p>
+                          <p>{{ card.applicationScenarios }}</p>
+                          <p> {{ card.illustrate }}</p>
+                        </div>
+                      </div>
+                      <div class="card_bottom">
+                        <span style="color: #ec7520">公示中</span>
+                        <el-button class="button" round>提交异议</el-button>
+                      </div>
+                    </el-card>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+              <el-pagination
+                class="mt-6"
+                background
+                layout="prev, pager, next"
+                :page-size="9"
+                :total="cardsData.length">
+              </el-pagination>
+            </el-tabs>
+            <el-button-group>
+              <el-button plain class="back-button" type="text" @click="handleBack">
+                <Icon :size="24" icon="icon-park-solid:left-c" />&nbsp;返回
+              </el-button>
+            </el-button-group>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Icon from '@/components/Icon/Icon.vue';
+  import cardLogo from '@/assets/images/mallHome/biaoqian.png';
+
+
+
+  export default {
+    name: 'Front',
+    components: { Icon },
+    data() {
+      return {
+        activeName: 'first',
+        activeName1: 'first',
+        activeName2: 'first',
+        cardLogo,
+        cardsData: [
+          {
+            title: '阀类需求弹性分析数据',
+            applicant: '办公室',
+            dataSource: '自行生产',
+            applicationScenarios: '销售宣传',
+            illustrate: '撰写季度党建工作总结报告',
+          },
+          {
+            title: '大学食堂销量预测',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '现场采集',
+            applicationScenarios: '问卷调查',
+            illustrate:
+              'Apriori算法对数据集进行多次扫描，第一次扫描得到频繁1-项集L1，第k(k>1)次.........',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+          {
+            title: '销售量对价格变化的反应研究',
+            applicant: '天津融创软通科技股份有限公司',
+            dataSource: '关系型与非关系型数据库分析数据',
+            applicationScenarios: '销售宣传',
+            illustrate:
+              '关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
+          },
+        ],
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
+      handleBack() {
+        this.$router.go(-1);
+      },
+
+    },
+  };
+</script>
+<style scoped lang="scss">
+  /*公共容器 所有子页面共享的css样式*/
+  .commonContainer {
+    display: flex;
+    flex-direction: column;
+    /*justify-content: center; !* 垂直居中 *!*/
+    align-items: center; /* 水平居中 */
+    text-align: center;
+    position: relative;
+  }
+
+  /*子页面中文标题样式*/
+  .content-item-h3 {
+    height: 43px;
+    font-size: 36px;
+    font-weight: 580;
+    z-index: 3;
+    color: #383737ff;
+    line-height: 43px;
+    letter-spacing: 10px;
+    margin: 60px 0 0 0;
+  }
+
+  .title_bottom {
+    margin-top: 40px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #a3a3a3;
+    letter-spacing: 4px;
+  }
+
+  .item-content-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .carouselImg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .tab-pane {
+    position: relative;
+    width: 1440px;
+    display: flex;
+    margin-top: 16px;
+    margin-bottom: 32px;
+  }
+
+  //tabs 按钮
+  .back-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 18px;
+    margin-top: 3px;
+    color: #3a5cde;
+  }
+
+  .card-row {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+    font-size: 18px;
+    text-align: left;
+
+    p {
+      margin-top: 18px;
+      height: 24px;
+    }
+
+    .card-left {
+      width: 28%;
+      color: #707070;
+    }
+
+    .card-right {
+      width: 68%;
+      color: #3f3f3f;
+    }
+  }
+
+  .tab-label {
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  .card_bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 500;
+
+    .button {
+      color: #1962e2;
+      border: #1962e2 2px solid;
+    }
+  }
+
+
+  .custom-table {
+    margin-bottom: 72px;
+  }
+
+  .table-span {
+    color: #1962e2;
+    margin-left: 80px;
+  }
+
+  .table-span-label {
+    margin-left: 80px;
+  }
+
+</style>

src/views/AAAFont/tradingMarket/details/dataSet.vue

@@ -17,7 +17,7 @@
             />
           </div>
           <div class="ml-3">
-            <div class="title">数据集</div>
+            <div class="title">数据服务</div>
             <div class="path">党建工作总结</div>
           </div>
           <div class="buttonGroup"> </div>

src/views/AAAFont/tradingMarket/details/file.vue

@@ -17,8 +17,8 @@
           />
         </div>
         <div class="ml-3">
-          <div class="title">文件</div>
-          <div class="path">党建工作总结</div>
+          <div class="title">数据集</div>
+          <div class="path">用户认证日志</div>
         </div>
         <div class="buttonGroup"> </div>
       </div>

src/views/AAAFont/tradingMarket/index.vue

@@ -399,40 +399,40 @@
         ],
         cardsData: [
           {
-            "title": "用户登录日志",
-            "applicant": "安全部",
-            "dataSource": "关系型数据库",
-            "applicationScenarios": "身份验证",
-            "illustrate": "记录用户每次登录的时间、IP地址、设备信息和登录状态",
-            "look": "48",
-            "tag": "安全"
+            title: '用户登录日志',
+            applicant: '安全部',
+            dataSource: '关系型数据库',
+            applicationScenarios: '身份验证',
+            illustrate: '记录用户每次登录的时间、IP地址、设备信息和登录状态',
+            look: '48',
+            tag: '安全',
           },
           {
-            "title": "订单处理日志",
-            "applicant": "运营部",
-            "dataSource": "分布式数据库",
-            "applicationScenarios": "订单管理",
-            "illustrate": "记录每个订单的处理过程，包括支付状态、发货状态等",
-            "look": "35",
-            "tag": "运营"
+            title: '订单处理日志',
+            applicant: '运营部',
+            dataSource: '分布式数据库',
+            applicationScenarios: '订单管理',
+            illustrate: '记录每个订单的处理过程，包括支付状态、发货状态等',
+            look: '35',
+            tag: '运营',
           },
           {
-            "title": "广告点击日志",
-            "applicant": "市场部",
-            "dataSource": "NoSQL数据库",
-            "applicationScenarios": "广告监控",
-            "illustrate": "记录每次广告的点击情况，用于广告效果分析",
-            "look": "25",
-            "tag": "市场营销"
+            title: '广告点击日志',
+            applicant: '市场部',
+            dataSource: 'NoSQL数据库',
+            applicationScenarios: '广告监控',
+            illustrate: '记录每次广告的点击情况，用于广告效果分析',
+            look: '25',
+            tag: '市场营销',
           },
           {
-            "title": "系统错误日志",
-            "applicant": "运维部",
-            "dataSource": "日志数据库",
-            "applicationScenarios": "系统维护",
-            "illustrate": "记录系统运行中的错误信息，包括异常堆栈和错误类型",
-            "look": "55",
-            "tag": "运维"
+            title: '系统错误日志',
+            applicant: '运维部',
+            dataSource: '日志数据库',
+            applicationScenarios: '系统维护',
+            illustrate: '记录系统运行中的错误信息，包括异常堆栈和错误类型',
+            look: '55',
+            tag: '运维',
           },
         ],
         cardsData1: [