数据分析、营销、预测：优质产品一站式服务 | 首页

\u003ctemplate\u003e\n \u003cdiv class\u003d"index-wrap"\u003e\n \u003cdiv class\u003d"index-left"\u003e\n \u003cdiv class\u003d"index-left-block"\u003e\n \u003ch2\u003e全部产品\u003c/h2\u003e\n \u003cdiv v-for\u003d"(product, index) in productList" :key\u003d"index"\u003e\n \u003ch3\u003e{{ product.title }}\u003c/h3\u003e\n \u003cul\u003e\n \u003cli v-for\u003d"item in product.list" :key\u003d"item"\u003e\n \n \u003crouter-link :to\u003d"item.url" v-if\u003d"product.type ==='pc'"\u003e{{ item.name }}\u003c/router-link\u003e\n \u003ca :href\u003d"item.url" v-else\u003e{{ item.name }}\u003c/a\u003e\n \u003cspan v-if\u003d"item.hot" class\u003d"hot-tag"\u003eHOT\u003c/span\u003e\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003cdiv v-if\u003d"!product.last" class\u003d"hr"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class\u003d"index-left-block lastest-news"\u003e\n \u003ch2\u003e精选产品\u003c/h2\u003e\n \u003cul\u003e\n \u003cli v-for\u003d"item in newsList" :key\u003d"item"\u003e\n \u003ca :href\u003d"item.url" class\u003d"new-item"\u003e{{ item.title }}\u003c/a\u003e\n \u003cdiv class\u003d"new-content"\u003e{{ item.content }}\u003c/div\u003e\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class\u003d"index-right"\u003e\n \u003cslide-show :slides\u003d"slides" :inv\u003d"invTime"\u003e\u003c/slide-show\u003e\n \u003cdiv class\u003d"index-board-list"\u003e\n \u003cdiv class\u003d"index-board-item" v-for\u003d"(item, index) in boardList"\n :class\u003d"[{ 'line-last': index % 2 !== 0 }, 'index-board-' + item.id]" :key\u003d"item"\u003e\n \u003cdiv class\u003d"index-board-item-inner"\u003e\n \u003ch2\u003e{{ item.title }}\u003c/h2\u003e\n \u003cp\u003e{{ item.description }}\u003c/p\u003e\n \u003cdiv class\u003d"index-board-button"\u003e\n \u003crouter-link class\u003d"button" :to\u003d"{ path: 'detail/' + item.toKey }"\u003e立即购买\u003c/router-link\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript type\u003d"text/ecmascript-6"\u003e\nimport slideShow from '../components/slideShow'\n\nexport default {\n created: function () {\n this.$http.get('api/getNewsList')\n .then((res) => {\n // console.log(res)\n // console.log(this)\n this.newsList = res.data\n }, (err) => {\n console.log(err)\n })\n },\n methods: {\n\n },\n components: {\n slideShow\n },\n data() {\n return {\n invTime: 2000,\n slides: [\n {\n src: require('../assets/slideShow/pic1.png'),\n href: 'detail/analysis'\n },\n {\n src: require('../assets/slideShow/pic2.png'),\n href: 'detail/count'\n },\n {\n src: require('../assets/slideShow/pic3.png'),\n href: ''\n },\n {\n src: require('../assets/slideShow/pic4.png'),\n href: 'detail/forecast'\n }\n ],\n boardList: [\n {\n title: '开放产品',\n description: '开放产品是一款开放产品',\n id: 'car',\n toKey: 'analysis',\n saleout: false\n },\n {\n title: '品牌营销',\n description: '品牌营销帮助你的产品更好地找到定位',\n id: 'earth',\n toKey: 'count',\n saleout: false\n },\n {\n title: '使命必达',\n description: '使命必达快速迭代永远保持最前端的速度',\n id: 'loud',\n toKey: 'forecast',\n saleout: true\n },\n {\n title: '勇攀高峰',\n description: '帮你勇闯高峰，到达事业的顶峰',\n id: 'hill',\n toKey: 'publish',\n saleout: false\n }\n ],\n newsList: [],\n productList: {\n pc: {\n type:'pc',\n title: 'PC产品',\n list: [\n {\n name: '数据统计',\n url: '/detail/count'\n },\n {\n name: '数据预测',\n url: '/detail/forecast'\n },\n {\n name: '流量分析',\n url: '/detail/analysis',\n hot: true\n },\n {\n name: '广告发布',\n url: '/detail/publish'\n }\n ]\n },\n app: {\n type:'app',\n title: '数据库',\n last: true,\n list: [\n {\n name: '云原生数据库 PolarDB',\n url: 'https://www.aliyun.com/product/polardb?spm=5176.28055625.J_8569522920.55.1880154arkG1Zp'\n },\n {\n name: '云数据库 RDS MySQL 版',\n url: 'https://www.aliyun.com/product/rds/mysql',\n hot: true\n },\n {\n name: '云原生数据仓库 AnalyticDB MySQL 版',\n url: 'https://www.aliyun.com/product/ApsaraDB/ads'\n },\n {\n name: '云原生多模数据库 Lindorm',\n url: 'https://www.aliyun.com/product/apsaradb/lindorm'\n }\n ]\n }\n }\n }\n }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.index-wrap {\n width: 1200px;\n margin: 0 auto;\n overflow: hidden;\n}\n\n.index-left {\n float: left;\n width: 300px;\n text-align: left;\n}\n\n.index-right {\n float: left;\n width: 900px;\n}\n\n.index-left-block {\n margin: 15px;\n background: #fff;\n box-shadow: 0 0 1px #ddd;\n}\n\n.index-left-block .hr {\n margin-bottom: 20px;\n}\n\n.index-left-block h2 {\n background: linear-gradient(248deg, #ff8c1f, #ff6a00);\n color: #fff;\n padding: 10px 15px;\n margin-bottom: 20px;\n}\n\n.index-left-block h3 {\n padding: 0 15px 5px 15px;\n font-weight: bold;\n color: #222;\n}\n\n.index-left-block ul {\n padding: 10px 15px;\n}\n\n.index-left-block li {\n padding: 5px;\n line-height: 20px;\n}\n.index-left-block li:hover{\n color: #ff8c1f;\n}\n\n.index-board-list {\n overflow: hidden;\n}\n\n.index-board-item {\n float: left;\n width: 400px;\n background: #fff;\n box-shadow: 0 0 1px #ddd;\n padding: 20px;\n margin-right: 20px;\n margin-bottom: 20px;\n}\n\n.index-board-item-inner {\n min-height: 125px;\n padding-left: 120px;\n}\n\n.index-board-car .index-board-item-inner {\n background: url(../assets/images/1.png) no-repeat;\n}\n\n.index-board-loud .index-board-item-inner {\n background: url(../assets/images/2.png) no-repeat;\n}\n\n.index-board-earth .index-board-item-inner {\n background: url(../assets/images/3.png) no-repeat;\n}\n\n.index-board-hill .index-board-item-inner {\n background: url(../assets/images/4.png) no-repeat;\n}\n\n.index-board-item h2 {\n font-size: 18px;\n font-weight: bold;\n color: #000;\n margin-bottom: 15px;\n}\n\n.line-last {\n margin-right: 0;\n}\n\n.index-board-button {\n margin-top: 20px;\n}\n\n.lastest-news {\n min-height: 512px;\n}\n\n.hot-tag {\n background: red;\n color: #fff;\n}\n\n.new-item {\n display: inline-block;\n overflow: hidden;\n font-weight: 500;\n font-size: 14px;\n line-height: 24px;\n margin-bottom: 12px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.new-content {\n font-weight: 400;\n font-size: 14px;\n color: #737373;\n line-height: 24px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n white-space: pre-wrap;\n -webkit-box-orient: vertical;\n}\n\u003c/style\u003e