Blame view

app/pages/Chinese/team_lab/t_l_team.html 15.2 KB
7820380e   “wangming”   1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CCDC</title>
      <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
      <link rel="stylesheet" href="../../../static/common/index.css">
      <!--引入 element-ui 的样式,-->
      <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
      <!-- 必须先引入vue,后使用element-ui -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> -->
      <!-- 引入element 的组件库-->
      <!-- <scrip src="https://unpkg.com/element-ui/lib/index.js"> -->
      <!-- <script src="../../static/js/include.js"></script> -->
      <script src="../../../static/js/public.js"></script>
      <link rel="stylesheet" href="../../../static/common/swiper.css">
      <link rel="stylesheet" href="../../../static/css/team_lab/t_l_team.css">
      <link rel="stylesheet" href="../../../static/css/public/footer.css">
  </head>
  
  <body>
      <div id="app">
          <!-- 头部导航栏和标题 -->
          <div class="head">
              <!-- logo -->
              <h1><img src="../../../static/imgs/home/logo.png" alt=""></h1>
              <!-- 导航栏 -->
              <ul>
                  <span class="to_li" style="left: 68%;"></span>
                  <li><a href="../index.html" target="_self">首页</a></li>
                  <li><a href="../about/about.html" target="_self">关于我们</a></li>
                  <li><a href="../product/product.html" target="_self">钻井液产品</a></li>
                  <li><a href="../system/system.html" target="_self">钻井液体系</a></li>
                  <li><a href="../technology/technology.html" target="_self">钻井液技术</a></li>
                  <li><a href="../team_lab/t_l_centers.html" class="red_bold" target="_self">实验室/团队</a></li>
                  <li><a href="../manu/manu.html" target="_self">生产制造</a></li>
                  <li><a href="../contact/contact.html" target="_self">联系我们</a></li>
              </ul>
              <!-- 后方标志 -->
              <ol>
                  <li><img src="../../../static/imgs/home/search.png" alt=""></li>
                  <li><img src="../../../static/imgs/home/translate.png" alt=""></li>
                  <li>
                      <span class="lan_change" data-title="English">EN</span>
                      <span class="lan_change" data-title="Russian">RU</span>
                      <span class="lan_change" data-title="Spain">ES</span>
                      <span class="lan_change" data-title="Chinese">CN</span>
                  </li>
              </ol>
          </div>
      </div>
      <div class="banner">
          <div>
              <p>实验室/团队</p>
              <p>复杂油气攻坚者</p>
          </div>
          <img src="../../../static/imgs/team_lab/banner.jpg" alt="">
      </div>
      <!-- 切换地方 -->
      <div class="change">
          <div class="tab-container">
              <!-- 标签页选项卡 -->
              <div class="tag">
                  <div class="main">
                      <span class="tab_to" style="left: 755.484px;"></span>
                      <div class="tab"><a href="./t_l_centers.html">研究中心</a></div>
                      <div class="tab"><a href="./t_l_lab.html" target="_self">实验室</a></div>
                      <div class="tab active"><a href="./t_l_team.html" style="color: #c70009;">团队</a></div>
                      <div class="tab"><a href="./t_l_station.html" target="_self">液体泥浆厂</a></div>
                  </div>
              </div>
              <!-- 标签页内容 -->
              <div class="content">
                  <!-- SERVICE TEAM 团队 -->
                  <div id="tab2" class="tab-content" style="display: block;">
                      <!-- 分类区域 -->
                      <div class="fen_cont">
                          <div class="text_cont">
                              <p class="hor_text">
                                  川庆钻探拥有钻井液完井液服务队伍300余支,可同时为280口井或280台钻机提供服务,从业人员1383人,教授级高工5人,博士12人。CCDCDF®在海外钻井液从业人员235人,其中海外中方泥浆专家25人,外籍钻井液工程师210人。
                              </p>
                          </div>
                          <p class="title">专家工作室</p>
                          <div class="export_cont">
                              <!-- <div>
                                  <video src="../../static/video/高强实验室宣传片-高强工作室4.7导出 - 副本.m4v" class="video" controls
                                      muted autoplay loop></video>
                                  <p>GAO QIANG DRILLING FLUID SKILLS EXPERT STUDIO</p>
                              </div>
                              <div>
                                  <video src="../../static/video/20230302+“兰”心慧至“一带一路” 王兰工作室+v53.mp4" class="video"
                                      controls muted autoplay loop></video>
                                  <p>WANG LAN'S "DOUBLE INNOVATiION" STUDIO</p>
                              </div>
                              <div>
                                  <video src="../../static/video/20231027吉永忠工作室英文版.mp4" class="video" controls muted
                                      autoplay loop></video>
                                  <p>Ji YONGZHONG STUDIO</p>
                              </div> -->
                          </div>
                      </div>
                      <div class="fen_cont" style="margin-top: 70px;">
                          <p class="title">服务团队</p>
                          <div class="team_cont">
                              <img src="../../../static/imgs/team_lab/service_team/service10.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service8.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service1.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service2.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service3.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service4.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service5.jpg" alt="">
                              
                              <img src="../../../static/imgs/team_lab/service_team/service11.jpg" alt="">
                              <img src="../../../static/imgs/team_lab/service_team/service7.JPG" alt="">
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  
      <!-- 尾部 -->
      <div class="fot">
          <!-- 尾部列表区域 -->
          <div class="all_ul">
1eced910   “wangming”   1
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
                  <div class="ul1">
                      <span>产品</span>
                      <ul>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/product/product_type.html?data=35&title=%E7%AC%AC%E5%85%AB%E5%A4%A7%E7%B1%BB">清洁剂</a>
                          </li>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/product/product_type.html?data=37&title=%E7%AC%AC%E5%85%AB%E5%A4%A7%E7%B1%BB%E7%B3%BB%E5%88%97">ROP提速剂,防钻头泥包剂(强分散泥页岩)<br>
                                  HPWBM高性能泥浆用</a>
                          </li>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/product/product_type.html?data=36&title=%E7%AC%AC%E5%85%AB%E5%A4%A7%E7%B1%BB%E7%B3%BB%E5%88%97">ROP提速剂,防钻头泥包剂(中等分散泥页岩)<br>
                                  HPWBM高性能泥浆用</a>
                          </li>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/product/product_type.html?data=36&title=%E7%AC%AC%E4%B9%9D%E5%A4%A7%E7%B1%BB">起泡剂</a>
                          </li>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/product/product_type.html?data=37&title=%E7%AC%AC%E5%8D%81%E5%A4%A7%E7%B1%BB">杀菌剂</a>
                          </li>
                      </ul>
                  </div>
                  <div class="ul1">
                      <span>体系</span>
                      <ul>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/system/system_detail.html?data=121">两性离子聚合物钻井液体系 </a>
                          </li>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/system/system_detail.html?data=122">高固相容量水基钻井液体系 </a>
                          </li>
                          <li>
                              <a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/system/system_detail.html?data=123">高性能水基钻井液体系</a>
                          </li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/system/system_detail.html?data=126">快速钻进环保钻井液体系</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/system/system_detail.html?data=127">防塌环保钻井液体系</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/system/system_detail.html?data=128">低伤害环保钻井液体系</a></li>
                      </ul>
                  </div>
                  <div class="ul1">
                      <span>技术</span>
                      <ul>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/technology/technology_detail.html?data=124">长段大尺寸井眼钻井液技术</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/technology/technology_detail.html?data=139">高压盐水治理技术</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/technology/technology_detail.html?data=140">井眼强化技术</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/technology/technology_detail.html?data=141">高失水固化堵漏技术</a></li>
                      </ul>
                  </div>
                  <div class="ul1">
                      <span>实验室/团队</span>
                      <ul>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/team_lab/t_l_centers.html">研发中心</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/team_lab/t_l_lab.html">实验室</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/team_lab/t_l_team.html">服务团队</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/team_lab/t_l_station.html">液体泥浆厂</a></li>
                          <!-- <li>Academic exchange</li> -->
                      </ul>
                  </div>
                  <div class="ul1">
                      <span>生产制造</span>
0562dfe9   “wangming”   Update manufactur...
188
189
190
191
192
                                <ul>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/manu/manu.html?tab=1"> 生产基地</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/manu/manu.html?tab=2">车间</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/manu/manu.html?tab=3">质量检验实验室</a></li>
                          <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Chinese/manu/manu.html?tab=4">仓库</a></li>
1eced910   “wangming”   1
193
194
195
196
197
198
199
200
201
202
203
                      </ul>
                  </div>
                  <div class="ul1">
                      <span>联系我们</span>
                      <ul>
                          <li>电话: +86-028-86011661</li>
                          <li>传真: +86-028-86013997</li>
                          <li>邮箱: cqswc@cnpc.com.cn</li>
                          <li>中国四川成都孟追湾街6号</li>
                      </ul>
                  </div>
7820380e   “wangming”   1
204
              </div>
7820380e   “wangming”   1
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
          <!-- 尾部logo区域 -->
          <div class="bot_logo">
              <div class="logo_text">
                  <div class="lef">
                      <img src="../../../static/imgs/logowhite.png" alt="">
                      <!-- <span>©2023 这里有文字这里有文字</span> -->
                  </div>
                  <p>ICP备20230200号-1</p>
              </div>
          </div>
      </div>
  </body>
  <!-- <script>
      //切换50
      function openTab(event, tabName) {
          // 获取所有标签页内容元素
          var tabContent = document.getElementsByClassName("tab-content");
  
          // 隐藏所有标签页内容
          for (var i = 0; i < tabContent.length; i++) {
              tabContent[i].style.display = "none";
          }
  
          // 移除所有标签页选项卡的 active 类
          var tabs = document.getElementsByClassName("tab");
          for (var i = 0; i < tabs.length; i++) {
              tabs[i].className = tabs[i].className.replace(" active", "");
          }
  
          // 显示当前选中标签页内容
          document.getElementById(tabName).style.display = "block";
  
          // 添加 active 类到当前选中标签页选项卡
          event.currentTarget.className += " active";
      }
  </script> -->
  <link rel="stylesheet" href="../../../../node_modules/swiper/swiper-bundle.min.css">
  <script src="../../../../node_modules/swiper/swiper-bundle.min.js"></script>
  <script>
      // $('.tab').click(function () {
      //     let left_distance = $(this).position().left + 16 + $(this).width() / 2 - 20
      //     $('.tab_to').css("left", left_distance)
      //     // console.log($(this).width())
      //     console.log($(this).position().left + 16 + $(this).width()/2 - 20)
      // })
      // var swiper = new Swiper('.Swiper1', {
      //     loop:true,
      //     autoplay:true,
      //     pagination: {
      //         el: ".swiper-pagination",
      //         clickable: true,
      //     }
      // })
      let urlStr = window.location.href
      let apilang = ''
      if (urlStr.includes('English')) {
          // url = url.replace('English',change)
          // window.location.href = url
          apilang = 'English'
      } else if (urlStr.includes('Chinese')) {
          apilang = 'Chinese'
      } else if (urlStr.includes('Russian')) {
          apilang = 'Russian'
      } else if (urlStr.includes('Spain')) {
          apilang = 'Spain'
      }
      let baseUrl = 'https://ccdcfile.oss-cn-chengdu.aliyuncs.com'
      $.get(`http://www.ccdcdf.com:6080/api/index/LaboratoryVideo?apilang=${apilang}`, function (res) {
          console.log('返回的数据', res)
          $('.export_cont').empty()
          let str = ''
          if (res.code == 1) {
              res.data.forEach(item => {
                  
                  str += `
              <div>
                  <video src="${baseUrl + item.LaboratoryVideo}" class="video" controls
                      muted autoplay loop></video>
                  <p>${item.title}</p>
              </div>
              `
              })
  
          }
  
          $('.export_cont').append(str)
      })
  </script>
  
  </html>