前台页面-交易市场2

src/views/AAAFont/front/index.vue

@@ -22,14 +22,14 @@
                   >
                 </template>
                 <el-row class="mt-5" :gutter="20">
-                  <el-col :span="8">
+                  <el-col :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"
-                              >阀类需求弹性分析数据</span
+                            >{{card.title}}</span
                             >
                           </div>
                         </div>
@@ -44,83 +44,11 @@
                           <p>公示截止时间</p>
                         </div>
                         <div class="card-right">
-                          <p>天津市融创软通科技股份有限公司</p>
-                          <p>自行生产</p>
-                          <p>通过特定时间段内不用地区.....</p>
+                          <p>{{card.applicant}}</p>
+                          <p>{{card.dataSource}}</p>
+                          <p>{{card.applicationScenarios}}</p>
                           <p>
-                            1.数据采集：1）从数据源中获取数据，2）对数据进行预处理，3）对数据进行........</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-col :span="8">
-                    <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"
-                              >大学食堂销量预测</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>天津市融创软通科技股份有限公司</p>
-                          <p>现场采集</p>
-                          <p>销量的预测</p>
-                          <p>
-                            Apriori算法对数据集进行多次扫描，第一次扫描得到频繁1-项集L1，第k(k>1)次............</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-col :span="8">
-                    <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"
-                              >销售量对价格变化的反应研究</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>天津市融创软通科技股份有限公司</p>
-                          <p>问卷调查</p>
-                          <p>对数据的分析</p>
-                          <p>
-                            关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的.............</p
+                            {{card.illustrate}}</p
                           >
                         </div>
                       </div>
@@ -154,8 +82,7 @@
                   margin-top: 24px;
                   background-color: #754e9e;
                 "
-                ><img :src="dynamicImg"
-              /></div>
+              ><img :src="dynamicImg" /></div>
               <div class="mt-5 big-event">
                 <el-tag style="font-size: 14px">大事件</el-tag>
                 <span class="ml-2" style="font-size: 18px">大数据平台上线</span>
@@ -440,6 +367,29 @@
             address: '46-55岁人群对净水机满意度分析数据',
           },
         ],
+        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称为规则的......'
+          },
+        ],
       };
     },
     methods: {