问题描述:
如标题
问题解决:
直接上代码了:
VUE :
<template>
<div class="api_interface content-box content-right">
<!--
0: arctext.js 的使用 vue-arctxt.js
1: vue 旋转动画;
2: 动态绑定 class + 固定 class
3: 动态绑定 背景图片
4: 动态绑定点击事件
5: axios 请求 json 数据
6: 假设指针为 12 点钟方向,旋转的 0 - 30 度是最后一个星座(摩羯),所以把旋转角度 % 360 , 再看还有多少度,30 度为 1 份, 向下取整数,所以 0-30度 为 0 ,即是摩羯座,如果 - 12,再取正,即为 12,即为第12 个星座
7: 大转盘转动的时候,不想让中间的小元素旋转,但是写了很久,都没有完成
8: TP5 里面 把 curl 封装好,并调用, 在控制器里面 use app\index\controller\HttpRequest; 并用 new 调用, -> 方法名(参数... ...)
9: 调用其它文件的常数: 根目录文件里 common.php 定义 define('nameLetter', 'value'), 在控制器里面调用: $myData = nameLetter 即可
接口参数说明:
name string 星座名称
range string 星座公历日期范围
zxtd string 特点
sssx string 属性
zggw string 掌管宫位
yysx string 阴阳性
zdtz string 最大特征
zgxx string 主管星
xyys string 颜色
jssw string 珠宝
xyhm string 幸运号码
kyjs string 金属
bx string 基本表现
yd string 优点
qd string 缺点
jbtz string 基本特质
jttz string 具体特质
xsfg string 行事风格
gxmd string 个性缺点
zj string 总体评价
10: elementui table 没有纵向布局,所以自己写个列表
-->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>星座运势 Constellation</span>
<el-button type="text" @click="refresh">刷新</el-button>
</div>
<div class="constellation">
<div v-for="part in constellationIterData" :key="part.key" class="constellation-part" :class="`part-${part.key}`" :style="{ backgroundImage: 'url(' + part.bgImg + ')' }" @click="choosePart(part.key)">
<div class="text">
<p class="belong">{
{ part.belong }}</p>
<p class="smallText">{
{ part.date }}</p>
</div>
</div>
<div class="randLook" @click="randLook">{
{ randText }}</div>
</div>
<el-card class="box-card query-result" v-show="showRes">
<div slot="header" class="clearfix">
<span>结果如下</span>
</div>
<div class="resTab">
<table class="resTab">
<tr><td>星座名称name</td><td>{
{ tableData.name }}</td></tr>
<tr><td>星座公历日期范围range</td><td>{
{ tableData.range }}</td></tr>
<tr><td>特点zxtd</td><td>{
{ tableData.zxtd }}</td></tr>
<tr><td>属性sssx</td><td>{
{ tableData.sssx }}</td></tr>
<tr><td>掌管宫位zggw</td><td>{
{ tableData.zggw }}</td></tr>
<tr><td>阴阳性yysx</td><td>{
{ tableData.yysx }}</td></tr>
<tr><td>最大特征zdtd</td><td>{
{ tableData.zdtz }}</td></tr>
<tr><td>主管星zgxx</td><td>{
{ tableData.zgxx }}</td></tr>
<tr><td>颜色xyys</td><td>{
{ tableData.xyys }}</td></tr>
<tr><td